在ul块中选择li的具体数量

Question

我有一个ul-block，其中有15个位置。

预先显示前5个li-s，隐藏​​另外10个li-s。我有一个切换这个UL的功能 - 如果我点击按钮 - 它显示10 li-s但隐藏前5。

我需要这样的Jquery选择器，这样每次都可以看到5个第一个而不是切换。 这段代码选择了所有这些代码

var ul = $(this).parent().attr('class');
 $('.'+ul+' li').toggle();

如果有办法选择除前5个以外的所有？

Answer 1

由于问题下方的CSS标记，这是一个完整的CSS代码段。

＆＃13;

＆＃13;

/* hide */
#tgl:checked ~ul li:nth-child(5) ~li, #tgl {display: none; }
/* update label text */
#tgl:checked~[for="tgl"]:after             {content:' More'}
#tgl~[for="tgl"]:after                     {content:' Less'}
/*style label, easy demo */
label {appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari and Chrome */
}

＆＃13;

<input type="checkbox" id="tgl" checked/>
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<label for="tgl"> Show </label>

＆＃13;

＆＃13;

＆＃13;

通过输入状态和选择器:nth-child() ~

触发样式

切换样式可以来自：input ~ul li:nth-child(5) ~ li {/*any style*/}或input:checked ~ul li:nth-child(5) ~ li {/*any other style when input checked*/}

Answer 2

有几种方法可以做到这一点：

1）您可以使用slice function

$("ul li").slice(5).hide();
$('button').click(function(e) {
  $("ul li").slice(5).toggle().addClass('redText');
  e.preventDefault();
})

.redText {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<button> click </button>

2）或您可以使用jQuery :gt()（大于）选择器

$("ul li:gt(4)").hide();
$('button').click(function(e) {
  $("ul li:gt(4)").toggle().addClass('redText');
  e.preventDefault();
})

.redText {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>
<button> click </button>

最终更新

在您的评论下面，我已添加了一个最终的代码段，希望能完全回答您的问题。

//your function to fade in li past index 5
$.fn.myFunc = function(ul, event) {
  $('.' + ul + ' li:gt(4)').fadeToggle("fast");
};

//Add a button to the ul
$('.list').append('<button type="button" id="updateButton">Button</button>');

//button click event
$('#updateButton').on("click", function(e) 
{
  e.preventDefault();
  var myParameter = $(this).parent().attr("class");
  $(this).myFunc(myParameter, e);
});

.listitem-green{
  color: green;
}

.listitem-red{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li class="listitem-green"> 1 </li>
  <li class="listitem-green"> 2 </li>
  <li class="listitem-green"> 3 </li>
  <li class="listitem-green"> 4 </li>
  <li class="listitem-green"> 5 </li>
  <li class="listitem-red"> 6 </li>
  <li class="listitem-red"> 7 </li>
  <li class="listitem-red"> 8 </li>
  <li class="listitem-red"> 9 </li>
  <li class="listitem-red"> 10 </li>
  <li class="listitem-red"> 11 </li>
  <li class="listitem-red"> 12 </li>
  <li class="listitem-red"> 13 </li>
  <li class="listitem-red"> 14 </li>
  <li class="listitem-red"> 15 </li>
</ul>

Answer 3

您需要使用:gt()

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".ulClass li:gt(5)").hide();
  $('.clickMe').click(function() {
    $(".ulClass li:gt(5)").toggle();
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='ulClass'>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
  <li>something</li>
</ol>
<button class='clickMe'>Click me</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

借用代码段来显示css选择器而不是jQuery

＆＃13;

＆＃13;

$('ul > li:nth-of-type(n+6)').addClass('redText');

＆＃13;

.redText
{
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li> 1 </li>
  <li> 2 </li>
  <li> 3 </li>
  <li> 4 </li>
  <li> 5 </li>
  <li> 6 </li>
  <li> 7 </li>
  <li> 8 </li>
  <li> 9 </li>
  <li> 10 </li>
  <li> 11 </li>
  <li> 12 </li>
  <li> 13 </li>
  <li> 14 </li>
  <li> 15 </li>
</ul>

＆＃13;

＆＃13;

＆＃13;