如何隐藏一个列表中除前两个之外的所有li，以及另一个列表中的第三个和第四个？

Question

你能告诉我如何隐藏前两个里之外的所有里吗？在第二种情况下，我想隐藏所有希望在按钮上显示 3 和 4 li 的 li，单击此处是我的代码

https://jsbin.com/damolibule/edit?html,js,输出

$(function() {
  $('#id_show12').click(function() {
    $('.show12').not(":nth-child(2)").css("display", "none"); 
  })

  $('#id_show34').click(function() {
    $('.show34').not(":nth-child(5)").css("display", "none");  
  })
})

预期输出：当单击第一个按钮时，它1仅显示2。如果用户单击第二个按钮，则会显示3和4。

Answer 1

要仅显示前两个，li您可以使用:gt(1)获取以下所有内容li，然后是hide()它们，

要仅显示第三个和第四个，li您可以与不需要的结合not()使用。尝试这个：:eq(2):eq(3)hide()

$('#id_show12').click(function() {
  $('.show12 li:gt(1)').hide();
})
$('#id_show34').click(function() {
  $('.show34 li').not(':eq(2), :eq(3)').hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show12">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<div class="show34">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

<button id="id_show12">show only one/two</button>
<button id="id_show34">show only three/four</button>