1

jquery セレクターを使用しているときに、奇妙なことに遭遇しました。

私のHTML：

<ul id="unordered-list">
    <li>
        <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/>
        <input type="text" size="40"/>
        <input type="text" size="40"/>
    </li>
    <li>
        <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/>
        <input type="text" size="40"/>
        <input type="text" size="40"/>
    </li>
</ul>

ここで、最初の入力で最初の入力を選択して css を追加する場合、これを使用します。

$("#unordered-list li:nth-child(1) input:nth-child(1)").css("border", "5px solid red");


1. ブラウザが要素を選択します#unordered-list。
2. ブラウザは最初の li 要素を選択します。
3. ブラウザは、最初に見つかった入力要素を選択します。

しかし、それは起こりません。何も選択しません。
これは、最初の子であるため、実際に img を選択しようとするためです。

JQuery nth:child のドキュメントを見る:
http://api.jquery.com/nth-child-selector/

彼らは同じことをします：

<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

問題を示す動作中の jsfiddle を次に示します:
http://jsfiddle.net/uQYMz/

これは論理的ではないように思えます。input:nth-child(1) が利用可能な入力の最初のものを選択することを期待しています。これは意図された動作ですか? もしそうなら、この動作が選択された理由はありますか?

4

2 に答える 2

3

:nth-childこれは、CSS セレクター仕様からの定義です。

:nth-child(an+b)疑似クラス表記は、ドキュメント ツリー内でその前に +b-1 個の兄弟を持ち、n の値が正の整数またはゼロの場合、親要素を持つ要素を表します。

特定のタイプのすべての要素ではなく、兄弟のセット内のすべての要素に適用されます。そのための別のセレクターがあり、適切な名前が付けられてい:nth-of-typeます。

$("#unordered-list li:nth-child(1) input:nth-of-type(1)").css("border", "5px solid red");

これが更新された fiddleです。

次のように元のセレクターを読み取ることができます。

  • #unordered-list要素を選択
  • の要素がli要素の場合:nth-child(1)は、要素を選択してくださいli
  • の要素がinput要素の場合:nth-child(1)は、要素を選択してくださいinput
于 2013-06-18T14:17:17.190 に答える