4

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

  • 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/

4

7 回答 7

10

为什么不只是这个：

$('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 可以匹配多个：每个父元素一个。

这现在有效：

工作示例

于 2012-07-20T15:23:46.833 回答
1

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

$('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'); 
    }
});
于 2012-07-20T15:26:56.750 回答
1

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

$('ul:first-child:last-child')
于 2014-08-27T01:36:27.790 回答
0

可能只有一种情况

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

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

它的孩子数是1。

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

于 2012-07-20T15:25:53.553 回答
0

你应该试试这个。

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

});
于 2012-07-20T15:26:49.200 回答
0

检查这个小提琴：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');
于 2012-07-20T15:28:04.043 回答
0

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

$(".breadcrumb > li:gt(0):last > a")
于 2015-04-13T15:12:14.910 回答