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()
鳥精
====