web-dev-qa-db-ja.com

n番目のアイテムの後のJquery、リストアイテムの非表示と表示

次のように、順序付けられていないリストがあるとします。

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

JQueryを使用して、最後の2つのリストアイテムを非表示にし、「さらに表示」リンクを設定すると、クリックすると最後の2つのリストアイテムが表示されます。

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li style="display:none;">Four</li>
   <li style="display:none;">Five</li>
   <li>Show More</li>
</ul>
javascriptjqueryhidetoggle
25
Keith Donegan

次のコード例を試してください。

$('ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('ul li:gt(3)').show();
});
35
pex

楽しみのために、次の方法で1つのチェーンでそれを行うことができます。

$('ul')
  .find('li:gt(3)')
  .hide()
  .end()
  .append(
    $('<li>Show More...</li>').click( function(){
      $(this).siblings(':hidden').show().end().remove();
    })
);
17
Ken Redler

Maxより大きい場合にのみ「表示/非表示」を表示したかったので、ケンに続いてこれを行いました。

$('ul').each(function(){
  var max = 6
  if ($(this).find("li").length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
      .append(
        $('<li>More...</li>').click( function(){
          $(this).siblings(':hidden').show().end().remove();
        })
    );
  }
});
12
CloudMagick

もっとこうなるでしょう。 Threeは2としてインデックス付けされるため、2より大きい子を非表示にする必要があります。また、LIタグにShow Moreを配置する場合は、セレクタに:not(:last-child)を含める必要があります。そのようです：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a href=# class=show>Show More</a></li>
</ul>
<script>$("li:gt(2):not(:last-child)").hide();
$('.show').click(function(){
$("li:gt(2)").show();
});
</script>
5
bozdoz

Show N N Items jQuery Plugin を試すことができます。あなたが書く必要があるのはこれだけです：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

これは自動的にこれに変換されます：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: none;">Four</li>
    <li style="display: none;">Five</li>
</ul>

[さらに表示]をクリックすると、次のように変換されます。

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: list-item;">Four</li>
    <li style="display: list-item;">Five</li>
</ul>

Fyi、このプラグインにコードを提供しました。

3
Eric Broder

KenとCloudに続いて、[もっと見る]ボタンのプロビジョニングを追加して、[より少ない]に切り替え、関連するリストアイテムを切り替えます。

$('.nav_accordian').each(function(){
    var max = 6
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});
2
Robert Waddell

あなたはあなたのサンプルコードに従ってULから始めていると仮定しています。

ULを見つけ、最初に表示する最後のアイテムのインデックスより大きいアイテムを非表示にします。次に、残りを表示するためのフックとして機能する新しいアイテムを追加します。最後に、不要なオプションを表示しないようにします。

以下を参照してください。

$('ul li:gt(3)')
.hide()
.parent()
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>');
1
Brian Scott