("prev ~ siblings")

$('prev ~ siblings') 1.0追加

prevの要素の兄弟要素で、その後ろに続くエレメントを選択します。

項目 説明
prev セレクタを指定します。
siblings 次(隣)のセレクタを指定します。

(prev + next)と(prev ~ siblings)のセレクタは、連携する要素の親要素が同じでなければいけません。

デモ

#prev以降の兄弟DIV要素を選択して青のボーダーで囲っています。 兄弟のSPAN要素、兄弟のDIV子要素が選択されていないことに注目してください。

<!DOCTYPE html>
<html>
<head>
<style>
  div,span {
    display:block;
    width:80px;
    height:80px;
    margin:5px;
    background:#bbffaa;
    float:left;
    font-size:12px;
  }
  div#small {
    width:60px;
    height:25px;
    font-size:10px;
    background:#fab;
  }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV<br />("#prev"要素より前)</div>
<span id="prev">span#prev</span>
<div>DIV(兄弟)</div>
<div>DIV(兄弟)<div id="small">DIV(兄弟の子)</div></div>
<span>SPAN(兄弟)</span>
<div>DIV(兄弟)</div>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM