Question

我有一个jQuery问题，我似乎无法独立完成 - 虽然我知道如何使用：first-child和：last-child选择器来设置无序的第一个和最后一个元素，我我想在UL内部加一个标题......

我需要在LI内部的LI元素之前或之后放置标题，但这会使jQuery应用：first-child或：last-child到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^[docs]选择<li>元素，其中p:first-child为其上一个兄弟。

由于您有多个ul.grid元素，因此可以循环它们，然后成功使用first()^[docs]方法和last()^[docs]方法。

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

使用jQuery的.first()和.last()函数，而不是尝试使用选择器定位第一个和最后一个li元素。

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

如何在jQuery中使用：first-child和：last-child选择器时排除类

3 个答案: