ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryセレクター:only-childのユースケースの詳細な説明

jQueryセレクター:only-childのユースケースの詳細な説明

黄舟
黄舟オリジナル
2017-06-23 15:11:461181ブラウズ

概要

ある要素が親要素内の唯一の子要素である場合、その要素は一致します。

親要素に他の要素が含まれている場合、その要素は一致しません。

説明:

ul

の唯一の子要素であるliを検索HTMLコード:

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
</ul>

jQueryコード:

$("ul li:only-child")

結果:

[ <li>Glen</li> ]

このセレクターは、親要素要素。親要素に他の要素が含まれている場合、その要素は一致しません。

文法構造:

$(":only-child")

このセレクターは通常、クラスセレクター要素セレクターなどの他のセレクターと組み合わせて使用​​されます。例:

$("li:only-child").css("color","blue")

上記のコードは、li 要素を 1 つだけ青に設定して、ul 要素の下の li 要素のフォントの色を設定できます。

注: 上記のコードと組み合わせて概念を説明する必要があります。ここで言う親要素は li ではなく、li の親要素です。 li 要素の子要素の最後の要素と一致すると勘違いしている人がよくいます。

サンプルコード:






脚本之家




  • ASP教程
  • html教程
  • DIV+CSS教程
  • jQUERY教程
  • jAVAScript教程

以上がjQueryセレクター:only-childのユースケースの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。