jQuery – 子セレクタの例のみ
「
only-child
」は、親の唯一の子であるすべての要素を選択するために使用されます。
例
-
$( ‘:only-child’) – 子要素のすべての要素を選択します.
その親。
-
$( ‘li:only-child’) – <li>と一致するすべての要素を選択します.
その親の子のみ。
jQueryの例
この例では、ボタンをクリックすると、親の唯一の子であるため、
<li> DEF#1 </li>
だけが一致し、背景色を動的に変更します。
<html> <head> <title>jQuery only child example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery only child example</h1> <ul> <li>ABC #1</li> <li>ABC #2</li> <li>ABC #3</li> <li>ABC #4</li> <li>ABC #5</li> </ul> <ul> <li>DEF #1</li> </ul> <ul> <li>GHI #1</li> <li>GHI #2</li> </ul> <button>li:only-child</button> <script type="text/javascript"> $("button").click(function () { var str = $(this).text(); $("li").css("background", "white"); $(str).css("background", "coral"); }); </script> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-only-child.html[デモを試してください]