jQuery：如何检查孩子是第一个还是最后一个答案

【问题标题】：jQuery: how to check if child is first and also lastjQuery：如何检查孩子是第一个还是最后一个
【发布时间】：2015-04-13 23:41:31
【问题描述】：

我正在尝试为以下元素设置自定义样式

ul - 许多孩子中的第一个（ul.first）
在许多孩子中最后 (ul.last)
唯一的孩子（ul.first.last 或 ul.only）

HTML：

<ul class="selector">
    <li class="selector">some li
       <ul class="">
          <li>some fancy li - the ul parent should have first class</li>
       </ul>
       <ul class="">
          <li>some more li - the ul parent should have last class</li>
       </ul>
    </li>
    <li class="selector">some second li
        <ul class="">
          <li>some lonely li - the ul parent should have first and last classes</li>
       </ul>
    </li>
</ul>

所以我想出了一个 jQuery 来解决这个问题

$('ul.selector li.selector > ul').each(function () {
  if ($(this).is(':first') && $(this).is(':last')) {
    $(this).addClass('first last');
  } else if ($(this).is(':first')) {
    $(this).addClass('first');
  } else if ($(this).is(':last')) {
    $(this).addClass('last');
  }
});

感谢您的任何建议。

更新 - 这是一个你可以玩的小提琴，基于一个答案：http://jsfiddle.net/qAtpe/

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

为什么不只是这个：

$('ul.selector li.selector > ul').each(function() {
    $this = $(this); // cache $(this)
    if ($this.is(':first')) {
        $this.addClass('first'); 
    } 
    if ($this.is(':last')) {
        $this.addClass('last'); 
    }
});

然后使用下面的 CSS

.first {
    //this is first
}
.last { 
    // this is last
}
.first.last {
    // this is first and last - ie the only child
}

更新

$('ul.selector li.selector > ul').each(function() {
    $this = $(this); // cache $(this)
    if ($this.is(':first-child')) {
        $this.addClass('first'); 
    } 
    if ($this.is(':last-child')) {
        $this.addClass('last'); 
    }
});

查看您的示例 jsfiddle - 您需要选择器 :first-child 而不是 :first ..

:first 伪类等价于:eq(0)。它也可以写成:lt(1)。虽然这仅匹配单个元素，但 :first-child 可以匹配多个元素：每个父元素一个。

现在可以了：

Working example

【讨论】：

比我的回答+1好多了

【解决方案2】：

只检查元素是否有兄弟姐妹，否则它是唯一的孩子：

$('ul.selector li.selector > ul').each(function() {
    if ($(this).siblings().length===0)) {
        $(this).addClass('only'); 
    } else if ($(this).is(':first') ) {
        $(this).addClass('first'); 
    } else if ($(this).is(':last') ) {
        $(this).addClass('last'); 
    }
});

【讨论】：

我觉得这很有趣。我更好地了解兄弟姐妹的工作。这没用。感谢您的尝试:)

【解决方案3】：

我不确定这是否能回答您的问题，但您可以使用下面的选择器选择单独的 LI 元素，而不是在另一个 LI 之前/之后：

$('ul:first-child:last-child')

【讨论】：

【解决方案4】：

你应该试试这个。

$('ul.selector li.selector > ul').each(function() {
    $this = $(this);

    if  ( $this.is(':first') && $this.is(':last') ) {
        $this.addClass('first last'); 
    } else {

        if ($this.is(':first')) {
           $this.addClass('first'); 
        } 

        if ($this.is(':last')) {
            $this.addClass('last'); 
        }
    }

});

【讨论】：

你在做什么与问题不同？（除了缓存？）
我认为他的 jQuery 是错误的，因为他提出了这个问题。我还删除了他的多个 if 语句
@Danny 没问题，ManseUK 有最好的答案，你应该接受 :)
如果你能做到，我可以接受你的。检查我的问题更新以获得小提琴。到目前为止，没有一个答案对我有帮助：|

【解决方案5】：

只能有一种情况

如果孩子是第一个和最后一个，它会是一个，所以使用

$('ul.selector li.selector > ul').children().length ==1

孩子的数量是1。

不要使用 :first 它在 IE 中不起作用

【讨论】：

缩进 4 个空格的代码不是 > 和 :first 将适用于 jQuery 中的 IE（所有版本）

【解决方案6】：

检查这个小提琴：http://jsfiddle.net/KCAZQ/。如果只有一个元素，我假设这些元素也会涵盖它。

<ul>
    <li>first</li>
    <li>second</li>
    <li>thrid</li>
    <li>fourth</li>
</ul>

$('ul').find('li').first().css('color','green');
$('ul').find('li').last().css('color','green');

【讨论】：

我没有直接回答你的问题，但这会让你走上正轨，希望能帮助你理解 jQuery。
你的代码正在添加一些类，我在这里检查了jsfiddle.net/KCAZQ/4 但它并不是全部工作，但只是第一次遇到。
/\ 也许我应该使用 each() :)
做.first().last() 不会按照你想要的方式工作。如果.each() 示例正在运行，请使用它们。我只是想向您展示一种不同的方法。
我喜欢不同的方法。再次感谢。

【解决方案7】：

我在寻找相同的问题时遇到了这个问题，试图在我的面包屑中获取不是第一个 li 的最后一个 li > a。以下是我的解决方法：

$(".breadcrumb > li:gt(0):last > a")

【讨论】：