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

提案をありがとう。

更新 - これは、答えの1つに基づいて、遊ぶことができるフィドルです: 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) と書くこともできます。これは 1 つの要素のみに一致しますが、:first-child は複数の要素に一致する可能性があります: 親ごとに 1 つです。

これで動作します:

実施例

于 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 に答える
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/。要素が1つしかない場合は、これらもカバーすると思います。

<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 に答える