隐藏没有唯一标识符的选定元素

Question

使用下面的代码示例，我想做的是将图像保留在前 2 个列表对象中，但隐藏对象 3 和 4 中的图像。

从第四个对象中删除图像非常简单，但是我如何删除来自第三个物体的图像，同时保留第二个物体的图像。

<ul id="list">
<li class="start"><img class="postImage" src="image1.png" /><p>Some text here</p></li>
<li><img class="postImage" src="image2.png" /><p>Some text here</p></li>
<li><img class="postImage" src="image3.png" /><p>Some text here</p></li>
<li class="end"><img class="postImage" src="image4.png" /><p>Some text here</p></li>
</ul>

Answer 1

使用 jQuery 的 gt() 选择器。

要隐藏与这些图像关联的整个 li，请使用：

$("#list li:gt(1)").hide ();

要仅隐藏图像，请使用：

$("#list li:gt(1) img").hide ();

在 jsFiddle 上查看它的实际应用。

Answer 2

查看 :nth-child() JQuery 选择器。

$('#list li img:nth-child(4)').hide();
$('#list li img:nth-child(3)').hide();
// indexing from 1

或者：

var imgs = $("#list li img");
imgs.eq(2).hide();
imgs.eq(3).hide();
// indexing from 0

Answer 3

这不是一种非常通用的形式，但可以在您的情况下完成工作：

$("#list li img").eq(2).hide(); // hides the 3rd img
$("#list li img").eq(3).hide(); // hides the 4th img

一种更抽象的方式，这将隐藏第二个之后的所有 img：

$("#list li img").each(function(i) {
    if (i > 1) {
        $(this).hide();
    }
});

Answer 4

用CSS来做，很简单

ul#list li img:nt-child(3) , ul#list li img:nt-child(4){
    display:none;
}

Answer 5

或者最简单的方法：

$('#list li:eq(2) img').hide();

DEMO