javascript - jQuery:として扱われる
jqueryの選択で

Question

簡単な例は、jQuery のセレクターについて私を混乱させています。私はこのhtmlコードを持っています:

<div class="container">
   <h1>Welcome to my Website </h1>
   <p>First paragraph</p>
   <p>Second paragraph</p>
</div>

2番目のパラグラフを強調したい場合は、これが正しい方法だと思います:

$('p:nth-child(2)').css("background-color","yellow");

しかし、これは正しくありません。実際には、セクションが 2 つしかなく<p>、関数内に値 2 を入れている場合でも、最初の段落が強調表示されnth-child()ます。

要素を削除する<h1>と、2 番目の段落が強調表示されます。ということで、要素がjQueryセレクターで要素<h1>として扱われているようです。<p>

ただし、コード:

$('p:nth-child(1)').css("background-color","yellow");

何も強調表示しません。なぜこれが起こるのですか？

score 6 · Accepted Answer

nth-childあなたが探しているのは、文字通り「子の場所n」を意味します。期待どおりに動作します：nth-of-type

$('p:nth-of-type(2)').css("background-color","yellow");

score 3 · Accepted Answer

:nth-child親に関するものなので、最初の例で<p>は実際には2番目の子です。2番目のpにしたい場合は、使用する必要があります:nth-of-type

javascript - jQuery:として扱われるjqueryの選択で