.parentsUntil()

マッチした要素の親以上の祖先要素で、指定したセレクターや条件に一致する要素が出てくるまで選択して取得します。

.parentsUntil( [selector][, filter] ) 1.4追加

戻り値:jQuery

マッチした要素の親以上の祖先要素で、指定したセレクターや条件に一致する要素が出てくるまで選択して取得します。

引数 説明
[selector] ここに指定したセレクタにマッチするまで、先祖要素が選択され続けます。
[filter] 更に絞り込むためのセレクタを指定します。

.parentsUntil( [element][, filter] ) 1.6追加

戻り値:jQuery

マッチした要素の親以上の祖先要素で、指定したセレクターや条件に一致する要素が出てくるまで選択して取得します。

引数 説明
[element] ここに指定したDOM要素にマッチするまで、先祖要素が選択され続けます。
[filter] 更に絞り込むためのセレクタを指定します。

補足事項

  • .parentsUntil()自体にマッチした要素は選択する対象には含まれません。
  • もし、引数が指定されない、またはセレクタに指定した条件にどの要素もマッチしなければ、.parents()と同じような処理が行われます。
  • 第2引数にセレクタを指定すると、その条件にマッチしているかどうか検証され、フィルタリングが行われます。

デモ

item-aからlevel-1までの先祖要素を選択し、背景色を赤に変更し、
item-2からlevel-1までの先祖要素を取り出し、その中からyesクラスを持つ要素のみを取り出して緑色のボーダーで囲います。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="level-1 yes">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2 yes">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<script>
$("li.item-a").parentsUntil(".level-1")
  .css("background-color", "red");
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" )
  .css("border", "3px solid green");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM