jQuery:如何检查子项是否是第一个和最后一个

Question

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

• ul - 许多子项中的第一个 (ul.first)
• 许多 child 中的最后一个 (ul.last)
• 唯一的 child (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');
  }
});

感谢您的任何建议。

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

Answer 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 ..

The :first pseudo-class is equivalent to :eq(0). It could also be written as :lt(1). While this matches only a single element, :first-child can match more than one: One for each parent.

现在可以了:

Working example