Скрытие выбранных элементов без уникальных идентификаторов

Question

Используя мой пример кода ниже, я хотел бы сохранить изображения в первых двух объектах списка, но скрыть изображения в объектах 3 и 4.

Удаление изображения с 4-го объекта достаточно просто, но как я могу удалить изображение с 3-го объекта, сохраняя изображение на 2-м объекте?

<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's 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:eq(2) img').hide();

DEMO

Answer 4

Сделать это с помощью CSS, очень просто

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

Answer 5

Это не очень универсальная форма, но она работает в вашей ситуации:

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

Более абстрактный способ, это скрыло бы все img после 2-го:

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