选择 ul 块中特定数量的 li。

Question

我有一个ul块，其中有15个li位置。

前5个li已经预先显示，另外10个被隐藏。我有一个函数来切换这个UL - 如果我点击按钮 - 它会显示这10个li但隐藏前5个。

我需要这样的jQuery选择器，以便每次都可以看到前5个，并且不会切换。 这段代码选择它们所有。

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

有没有办法选择除了前5个之外的所有内容？

- Johnathan Fidelio

---

你应该展示你的 ul 结构。 - Panther

类似于:nth-of-type(n+6);这样的选择器 - Stender

https://www.w3schools.com/cssref/sel_nth-of-type.asp - Stender

@Stender 请不要使用W3Schools作为参考。他们的文章经常过时，有时甚至是错误的。MDN更加全面和准确：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type - Rory McCrossan

@RoryMcCrossan 当你是对的，你就是对的 - 那更为全面。 - Stender

Answer 1

由于问题下方的CSS标签，这里提供完整的CSS代码片段。

/* 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 */
}

<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>

样式是通过输入状态和选择器:nth-child() ~触发的。

可以通过以下方式切换样式：input ~ul li:nth-child(5) ~ li {/*任何样式*/}或input:checked ~ul li:nth-child(5) ~ li {/*输入选中时的任何其他样式*/}

- G-Cyrillus

Answer 2

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

1）您可以使用slice函数

$("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>

- Master Yoda

---

顺便问一下，也许你可以给出一些建议，以避免在切换后屏幕滚动到浏览器底部？ - Johnathan Fidelio

@JohnathanFidelio，可以尝试使用preventDefault();。我已经在两个示例中更新了它，请告诉我是否有帮助。 - Master Yoda

很遗憾，我没有这样的语法。这是我的代码。 很抱歉，但坦率地说，我不知道该放在哪里。你看，我没有这个“e”参数。 $.fn.myFunc = function() { var ul=$(this).parent().attr('class'); $('.'+ul+' li:gt(5)').fadeToggle("fast"); };$('.ul' + l).append('<button type="button" onclick="$(this).myFunc()">Button</button>'); 也许你可以建议在哪里放置这个preventDefault？ - Johnathan Fidelio

@JohnathanFidelio，请查看我的更新。希望能回答你的问题。 - Master Yoda

不幸的是，它没有成功。我创建了window.location = at.attr('href');来保存块位置，但我看不到锚点。 - Johnathan Fidelio

Answer 3

你需要使用:gt()

。

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

<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>

- Milan Chheda

---

谢谢！这真的很有帮助。 - Johnathan Fidelio

Answer 4

借用片段，使用 CSS 选择器而不是 jQuery 显示它

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

.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>

- Stender