ラボ > Javascript関連:DOM関連
Jqueryで対象の親や子要素を取得(parent()、parents()、children()、find()、next()、prev()など)
対象の親・子・前・次の要素を取得する
作成日:2017-12-26, 更新日:2017-12-26
基本
直接の親を取得 |
$(〇〇〇).parent() |
---|---|
直接の子を取得 |
$(〇〇〇).children() |
親の親も対象で探して取得 |
$(〇〇〇).parents(〇〇〇) |
子の子も対象で探して取得 |
$(〇〇〇).find(〇) |
次 |
$(〇〇〇).next() |
前 |
$(〇〇〇).prev() |
サンプルと結果
▼サンプル
<ul> <li id="a01">鳥 <ul> <li id="a11">鳥精</li> <li id="a12">ひな皮 <ul> <li id="a21">タレ</li> <li id="a22">塩</li> </ul> </li> <li id="a13">ナンコツ</li> </ul> </li> <li id="b01">豚 <ul> <li id="b11">豚精</li> <li id="b12">トントロ</li> </ul> </li> <li id="c01">丸ごとシマウマ</li> </ul> <script> var conLog = function(tmpLabel, tmpDom){ console.log(tmpLabel + "\n" + tmpDom[0].innerHTML + "\n===="); } conLog('.parent()', $('#a12').parent()); conLog('.children()', $('#a12').children()); conLog('.parents("#a01")', $('#a12').parents("#a01")); conLog('.find("#a22")', $('#a12').find("#a22")); conLog('.next()', $('#a12').next()); conLog('.prev()', $('#a12').prev()); </script>
▼結果
.parent() <li id="a11">鳥精</li> <li id="a12">ひな皮 <ul> <li id="a21">タレ</li> <li id="a22">塩</li> </ul> </li> <li id="a13">ナンコツ</li> ==== .children() <li id="a21">タレ</li> <li id="a22">塩</li> ==== .parents("#a01") 鳥 <ul> <li id="a11">鳥精</li> <li id="a12">ひな皮 <ul> <li id="a21">タレ</li> <li id="a22">塩</li> </ul> </li> <li id="a13">ナンコツ</li> </ul> ==== .find("#a22") 塩 ==== .next() ナンコツ ==== .prev() 鳥精 ====