Question

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

从第4个对象中删除图像非常简单，但如何在保留第2个对象上的图像的同时从第3个对象中删除图像。

<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() selector。

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

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

要隐藏图片，请使用：

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

See it in action at 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();

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

5 个答案:

DEMO