jQuery – 隣接する兄弟セレクターの例
例えば、
<div class="class1"></div> <p>I'm class1 sibling #1</p> <p>I'm class1 sibling #2</p> <p>I'm class1 sibling #3</p>
<div>と<p>は兄弟関係です。 ”
$(.class1 p)
“ステートメントは値 ”
I’m class1 sibling#1
“の<p>要素のみを選択し、残りの<p>要素は無視されます。
jQueryの例
この例では、<form>要素の直後または次の兄弟であるため、値「
I’m form siblings#1-DIV
」を持つ<div>タグのみが一致します。
<html> <head> <title>jQuery adjacent sibling selector example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <style type="text/css"> div { padding:8px 0px 8px 8px; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("form + div").css("border", "2px solid red"); }); </script> <body> <h1>jQuery adjacent sibling selector example</h1> <form> <label>TextBox 1 (Child) : </label><input name="textbox1"> <div class="level1"> <label>TextBox 2 (GrandChild) : </label><input name="textbox2"> </div> <div class="level1"> <div class="level2"> <label>TextBox 3 (Great GrandChild) : </label><input name="textbox3"> </div> </div> <label>TextBox 4 (Child) : </label><input name="textbox4"> </form> <div> I'm form siblings #1 - DIV</div> <p> I'm form siblings #2 - P </p> <div> I'm form siblings #3 - DIV </div> <p> I'm form siblings #4 - P </p> </body> </html>
リンク://wp-content/uploads/jQuery/jQuery-adjacent-sibling-selector.html[デモを試してください]