jquery - nth-child が jQuery を使用して機能しない

Question

Hello Fellas 私は自分のコードで nth-child を使用しようとしていますが、次のコードは機能しません

HTML

<ul class="colour" >
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>

jQuery

$(document).ready(function(e) {
    $('.colour ul li:nth-first-child(1)').css('color','pink');
});

なぜそれが機能しないのかわかりません plz help みんな

score 3 · Accepted Answer

nth-first-child疑似セレクターではありませんnth-child。

また、 class を持つ要素の子孫である.colour ulを探すものを選択しています。それはあなたのマークアップでは機能しません。またはだけが必要です。ul.colour.colourul.colour

nth-last-childあなたのコメントに応えて、存在するそのシナリオで使用したいと思います。デモ

score 1 · Accepted Answer

上記のすでに素晴らしい回答に加えて、eqそれらのliアイテムの数が一定に保たれる場合は、を使用できます。

<ul class="color">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

そしてJS：

//The indexing starts from 0, like in arrays
$('.color li:eq(0)').css('color', 'pink');

したがって、最後から 2 番目は次のようにアクセスできます。

$('.color li:eq(5)').css('color', 'pink');

ちょうど私の2セント！

score 1 · Accepted Answer

以下を使用する必要があります。

$(document).ready(function(e) {
    $('.colour ul li:nth-last-of-type(2)').css('color','pink');
});

これにより、最後から 2 番目の要素が選択されます。これがより多くのチュートリアルです。

score 0 · Accepted Answer

最後から 2 番目のをスタイル化する場合は<li>、次を使用できます。

$(document).ready(function(e) {
    $('.colour li:nth-last-child(2)').css('color','pink');
});

4 に答える 4