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)
“文はすべての<p>要素を選択します。
jQueryの例
この例では、値「
I’m form siblings#1-DIV
」および値「
I’m form siblings#3-DIV
」を持つBoth <div>タグが一致しています。 <form>の兄弟要素。
<html> <head> <title>jQuery general 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 general 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-general-sibling-selector.html[デモを試してください]