Question

我正在尝试为

元素设置自定义样式

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/

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

：第一个伪类相当于：eq（0）。它也可以写成：lt（1）。虽然这只匹配一个元素，但是：first-child可以匹配多个：每个父元素一个。

这现在有效：

Working example

Answer 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'); 
    }
});

Answer 3

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

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

Answer 4

只有一种情况

如果孩子是第一个和最后一个，那么它将是一个人，所以使用

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

孩子的数量是1。

并且不要使用：首先它在IE中不起作用

Answer 5

你应该试试这个。

$('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'); 
        }
    }

});

Answer 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');

Answer 7

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

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

jQuery：如何检查孩子是第一个也是最后一个

7 个答案:

更新