.nextAll()
- .nextAll( [selector] ) 1.2追加
- デモ
.nextAll( [selector] ) 1.2追加
戻り値:jQuery
マッチした要素集合内の各要素の次以降の全ての兄弟要素を取得します。セレクタを指定することでフィルタリングすることが可能です。
| 引数 | 説明 |
|---|---|
| [selector] | 更に絞り込むためのセレクタを指定します。 |
次のようなリストがあった場合、
<ul><li>リスト 項目 1</li><li>リスト 項目 2</li><li class="third-item">リスト 項目 3</li><li>リスト 項目 4</li><li>リスト 項目 5</li></ul>
下記の処理を実行すると、リスト項目3の次以降の要素が対象となり、 リスト項目4と項目5の背景色が赤くなります。 この例では引数は指定されていないので次以降の要素を確実に取得しますが、 もしセレクタが指定されていた場合は、そのセレクタに各要素がマッチしているか検証が行われます。
$('li.third-item').nextAll().css('background-color', 'red');
デモ
最初のDIV要素以降の兄弟要素を全て見つけ、classを割り当てることでボーダーを赤くしています。
<!DOCTYPE html><html><head><style>div { width: 80px; height: 80px; background: #abc;border: 2px solid black; margin: 10px; float: left; }div.after { border-color: red; }</style><script src="http://code.jquery.com/jquery-latest.js"></script></head><body><div>最初</div><div>兄弟<div>子</div></div><div>兄弟</div><div>兄弟</div><script>$("div:first").nextAll().addClass("after");</script></body></html>
2つ目の要素以降の兄弟要素を見つけ、"P"セレクタでのフィルタリングを通して classを割り当てteボーダーを赤くしています。
<!DOCTYPE html><html><head><style>div, p { width: 60px; height: 60px; background: #abc;border: 2px solid black; margin: 10px; float: left; }.after { border-color: red; }</style><script src="http://code.jquery.com/jquery-latest.js"></script></head><body><p>p</p><div>div</div><p>p</p><p>p</p><div>div</div><p>p</p><div>div</div><script>$(":nth-child(1)").nextAll("p").addClass("after");</script></body></html>
© 2010 - 2017 STUDIO KINGDOM
