Как исключить класс при использовании селекторов: first-child и: last-child в jQuery

Question

У меня проблема с jQuery, которую я не могу решить самостоятельно - хотя я знаю, как стилизовать первый и последний элементы неупорядоченного с помощью селекторов: first-child и: last-child, яЯ хотел бы также добавить заголовок внутри UL…

Мне нужно поместить заголовок до или после элементов LI внутри UL, но это заставляет jQuery применять: first-child или: last-child toэлемент P в зависимости от того, где он находится относительно списка элементов LI.

По сути, я хотел бы выяснить, как сделать так, чтобы: first-child и: last-child селектор вообще исключали элемент P,Посмотрев вокруг, я смог понять, что .not (), вероятно, то, что мне нужно, но не смог заставить его работать.

Например, это не работает -

$('ul.grid li:first-child').not($(.caption)).addClass('narrow');

Буду очень признателен, если кто-нибудь сможет мне помочь, основываясь на приведенном ниже

jQuery( document ).ready( function ($) {
    $('ul.grid li:first-child').addClass('narrow');
    $('ul.grid li:last-child').addClass( 'narrow' );
});

HTML:

<ul class="grid">
    <p class="caption">Caption text</p>
    <li>
        <img src="images/test1.jpg" alt="1" />
    </li>
    <li>
        <img src="images/test2.jpg" alt="2" />
    </li>
    <li>
        <img src="images/test2.jpg" alt="2" />
    </li>
</ul>   

Answer 1

Во-первых, недопустимо иметь <p> в качестве потомка <ul>.

"По сути, я хотел бы узнать, как сделать так, чтобы: first-child и: last-child селектор вообще исключали элемент P."

Помимо временного удаления <p>, вы не можете изменить тот факт, что <p> является first-child, а не <li>.

Если <p> является единственной проблемой, вы можете сделать это:

$('ul.grid > p:first-child + li').addClass( 'narrow' );
$('ul.grid > li:last-child').addClass( 'narrow' );

При этом используется next-adjacent-selector ^{[документы]} , чтобы выбрать элемент <li>, у которого p:first-child является предыдущим братом.

---

Поскольку у вас есть несколько ul.grid элементов, вы можете зациклить их, а затем успешно использовать first() ^{[документы]} метод и last() ^{[документы]} метод.

$('ul.grid').each(function() {
    $(this).children('li').first().addClass( 'narrow' );
    $(this).children('li').last().addClass( 'narrow' );
});

Answer 2

Хорошо, я думаю, что понимаю. Это работает?

$(function() {
    var ul = $('ul.grid');
    ul.find('li:first').addClass('narrow');
    ul.find('li:last').addClass('narrow');
});

Answer 3

Вместо попытки нацеливания на первый и последний элементы li с помощью селекторов, используйте функции jQuery .first() и .last().

jQuery( document ).ready( function ($) {
    $('ul.grid li').first().addClass('narrow');
    $('ul.grid li').last().addClass( 'narrow' );
});