More than 3 years have passed since last update.

jQuery　セレクターの取得方法まとめ（兄弟/親子）

jQuery

Posted at 2020-07-17

jqueryセレクターの取得方法(兄弟/親子)まとめです。

#準備
##HTMLデータ

    <ul style="position: relative;">
      <li>大リスト1</li>
      <li>大リスト2
        <ul id="target2">
          <li>大リスト2-中リスト1</li>
          <li>大リスト2-中リスト2
            <ul>
              <li>大リスト2-中リスト2-小リスト1</li>
              <li>大リスト2-中リスト2-小リスト2</li>
              <li>大リスト2-中リスト2-小リスト3</li>
              <li id="target1">大リスト2-中リスト2-小リスト4</li>
              <li>大リスト2-中リスト2-小リスト5</li>
              <li>大リスト2-中リスト2-小リスト6</li>
              <li>大リスト2-中リスト2-小リスト7</li>
            </ul>
          </li>
          <li>大リスト2-中リスト3</li>
        </ul>
      </li>
      <li>大リスト3</li>
    </ul>

##実行結果

#兄弟要素
##$("〜").next()　兄弟要素内で次の要素

$("#target1").next();で
大リスト2-中リスト2-小リスト5を取得　

##$("〜").nextAll()　兄弟要素内で次以降の全要素
$("#target1").nextAll();で
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6
大リスト2-中リスト2-小リスト7を取得

##$("〜").nextUntill(条件)　兄弟要素で次以降の全要素を条件要素の前まで

$("#target1").nextUntil(":contains(7)");で
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6を取得

※７という文字列を含む要素の前まで

##$("〜").prev()　兄弟要素内で前の要素

$("#target1").prev();で
大リスト2-中リスト2-小リスト3を取得

##$("〜").prevAll()　兄弟要素で前以降全ての要素

$("#target1").prevAll();で
大リスト2-中リスト2-小リスト1
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3を取得

##$("〜").prevUntil(条件)　兄弟要素で前以降の全要素を条件要素の前まで

$("#target1").prevUntil(":contains(1)");で
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3を取得

※遡る順番は条件要素に近い側（手前）からです。

##$("〜").siblings()　兄弟要素全て

$("#target1").siblings()　で
大リスト2-中リスト2-小リスト1
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6
大リスト2-中リスト2-小リスト7を取得

#子要素
##$("〜").children()　子要素全て

$("#target2").children();で
大リスト2-中リスト1
大リスト2-中リスト2
大リスト2-中リスト3を取得

##$("〜").children()　子要素全て(テキストノードを含む)

$("#target2").contents();で

text
大リスト2-中リスト1
text
大リスト2-中リスト2
text
大リスト2-中リスト3を取得を取得

※text部分はhtmlのタグ間で改行された際のインデント（スペース部分）を拾います

##$("〜").find(条件)　子要素内の条件と等しい要素全て

$("#target2").find("li");で
大リスト2-中リスト1
大リスト2-中リスト2
大リスト2-中リスト2-小リスト1
大リスト2-中リスト2-小リスト2
大リスト2-中リスト2-小リスト3
大リスト2-中リスト2-小リスト4
大リスト2-中リスト2-小リスト5
大リスト2-中リスト2-小リスト6
大リスト2-中リスト2-小リスト7
大リスト2-中リスト3を取得

#親要素

##$("〜").parent()　１階層上の親要素を取得

$("#target1").parent()で
ul要素を取得

##$("〜").parents()　先祖要素（全ての親要素）を取得

$("#target1").parents()で

##$("〜").parentsUntil(条件)　先祖要素で条件一致した要素の手前までを取得

$("#target1").parentsUntil("#target2");で

<ul></ul>
<li>大リスト2-中リスト2</li>を取得

※<ul id="target2"></ul>は条件一致なので含まれない

##("〜").closest(条件)　自身から先祖要素に遡り最初に条件一致した要素を取得

$("#target1").closest("ul");で
<ul></ul>を取得

※$("#target1").closest("li");の場合は自身を取得してしまうので気をつけてください

##("〜").offsetParent()　先祖要素でpositionがrelative/absolute/fixedいずれかの要素

$("#target1").offsetParent();で
<ul style="position:relative;"></ul>を取得

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

jQuery セレクターの取得方法まとめ（兄弟/親子）

jQuery　セレクターの取得方法まとめ（兄弟/親子）