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

Question

你能告诉我如何隐藏所有李期望前两个李吗？ 在第二种情况下，我想隐藏所有 li 期望在屁股单击上显示 3 和 4 li 这是我的代码

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

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

Answer 2

编辑按钮的 ID

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

J查询代码

$(function(){
$('#id_show12').click(function(){
$('.show12 li:nth-child(n+3)').css("display", "none");   
})
$('#id_show34').click(function(){
$('.show34 li:nth-child(-n+2), .show34 li:nth-child(n+5)').css("display", "none");  
})
})

JSBIN