- 子&子孫要素はfind()
- 親先祖要素はclosest()
- 兄弟要素はsiblings()
が、検索対象が広いので使いやすく感じています。
(1) マッチした子要素を取得 .children()
1段階下の階層までしかDOMツリーを遡って探してくれない。
子要素しか検索対象にせず、孫要素以降はみてくれない。
子要素がマッチすれば当該子要素のjQueryオブジェクトを配列（要素数1の）で返す。
なければ要素数0の配列を返却。
2つ下以降の階層も探してほしい時はfind()を使う。
しばらくjQueryに触れていないと、.child()というメソッドも存在したような気がしてくるが、
.child()などというものはない。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチしたjQueryオブジェクトを返却 var target = $("#d").children("div"); console.log(target.attr("id"), target.size()); // c 1 // 子までしか探しに行かない var target = $("#d").children("#b"); // #bは#dから見て孫の位置 console.log(target.attr("id"), target.size()); // undefined 0 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(2) マッチするすべての子・孫要素を取得 .find()
2段階下以降、孫要素以降の階層もDOMツリーを遡って探してくれる。
マッチした”すべての”jQueryオブジェクトを配列で返却する。
なければ要素数0の配列を返却。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチした"複数の"jQueryオブジェクトを返却 var target = $("#d").find("div"); console.log(target.attr("id"), target.size()); // c 2 // 孫以降も遡って探してくれる var target = $("#d").find("#b"); console.log(target.attr("id"), target.size()); // b 1 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(3) マッチした親要素を取得 .parent()
1段階上の階層までしかDOMツリーを遡って探してくれない。
親要素しか検索対象にせず、先祖要素以降はみてくれない。
親要素がマッチすれば当該親要素のjQueryオブジェクトを配列（要素数1の）で返すが、
なければ要素数0の配列を返却。
2つ上以降の階層も探してほしい時はparents()かclosest()を使う。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチしたjQueryオブジェクトを返却 var target = $("#b").parent("div"); console.log(target.attr("id"), target.size()); // c 1 // 親までしか探しに行かない var target = $("#b").parent("#d"); // #dは#bから見て先祖の位置 console.log(target.attr("id"), target.size()); // undefined 0 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(4) マッチするすべての親・先祖要素を取得 .parents()
2段階上以降、先祖要素以降もDOMツリーを遡って探してくれる。
マッチした”すべての”jQueryオブジェクトを配列で返却する。
取得した要素のセットの順番は、直近の親から外側に向かって並べられる。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチした"複数の"jQueryオブジェクトを返却 var target = $("#b").parents("div"); console.log(target.attr("id"), target.size()); // c 2 // 先祖以降も遡って探してくれる var target = $("#b").parents("#d"); // #dは#bから見て先祖の位置 console.log(target.attr("id"), target.size()); // d 1 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(5) マッチした初めの親・先祖要素を取得 .closest()
2段階上以降、先祖要素以降もDOMツリーを遡って探してくれる。 マッチした当該要素のjQueryオブジェクトを配列（要素数1の）で返す。 なければ要素数0の配列を返却。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチした"一番近い一つの"jQueryオブジェクトを返却.ただし自要素も含む var target = $("#b").closest("div"); console.log(target.attr("id"), target.size()); // b 1 // 先祖以降も遡って探してくれる var target = $("#b").closest("#d"); // #dは#bから見て先祖の位置 console.log(target.attr("id"), target.size()); // d 1 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(6) マッチした弟要素を取得 .next()
同じ階層レベルの直後の要素が検索対象。
マッチした当該要素のjQueryオブジェクトを配列（要素数1の）で返す。
なければ要素数0の配列を返却。
直後以降の弟も検索対象にしたい場合はsiblings()。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチしたjQueryオブジェクトを返却 var target = $("#a1").next("span"); console.log(target.attr("id"), target.size()); // a2 1 // 直後の兄弟までしか探しにいかない var target = $("#a1").next("#a3"); // #3は#1から見て2つ隣 console.log(target.attr("id"), target.size()); // undefined 0 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(7) マッチした兄要素を取得 .prev()
同じ階層レベルの直前の要素が検索対象。
マッチした当該要素のjQueryオブジェクトを配列（要素数1の）で返す。
なければ要素数0の配列を返却。
直前以降の兄も検索対象にしたい場合はsiblings()。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチしたjQueryオブジェクトを返却 var target = $("#a3").prev("span"); console.log(target.attr("id"), target.size()); // a2 1 // 直前の兄弟要素までしか探しにいかない var target = $("#a3").prev("#a1"); // #1は#3から見て2つ隣 console.log(target.attr("id"), target.size()); // undefined 0 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
(8) マッチしたすべての兄弟要素を取得 .siblings()
同じ階層レベルのすべての要素が検索対象。
マッチした”すべての”jQueryオブジェクトを配列で返却する。
なければ要素数0の配列を返却。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script> $(document).ready(function(){ // マッチしたjQueryオブジェクトを返却 var target = $("#a3").siblings("span"); console.log(target.attr("id"), target.size()); // a1 2 // 兄弟ぜんぶ探してくれる var target = $("#a3").siblings("#a1"); // #1は#3から見て2つ隣 console.log(target.attr("id"), target.size()); // a1 1 }); </script> </head> <body> <div id="d" style="padding: 25px; border:1px solid black; width:100px; height:150px;"> <div id="c" style="padding: 25px; border:1px solid black; width:50px; height:100px;"> <div id="b" style="padding: 10px; border:1px solid black; width:25px; height:75px;"> <span id="a1"> a1 </span> <span id="a2"> a2 </span> <span id="a3"> a3 </span> </div> </div> </div> </body> </html>
