.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>
© 2010 - 2017 STUDIO KINGDOM