DIV CSS 佈局教程網

siblings() 獲得匹配集合中每個元素的同胞，通過選擇器進行篩選是可選的。

語法
.siblings(selector)

其中selector為：字符串值，包含用於匹配元素的選擇器表達式。

詳細說明
如果給定一個表示 DOM 元素集合的 jQuery 對象，.siblings() 方法允許我們在 DOM 樹中搜索這些元素的同胞元素，並用匹配元素構造一個新的 jQuery 對象。
該方法接受可選的選擇器表達式，與我們向 $() 函數中傳遞的參數類型相同。如果應用這個選擇器，則將通過檢測元素是否匹配該選擇器對元素進行篩選。

實際應用：http:///a/bjad/ifjrn3s1.htm


例子一：

代碼：

<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$( "li.third-item" ).siblings().css( "background-color", "red" );
</script>

效果：

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5

例子二：
代碼：

<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

<script>
$( "p" ).siblings( ".selected" ).css( "background", "yellow" );
</script>

效果：
Hello

Hello Again

And Again

例子三：
<style>
ul.keleyi {
float: left;
margin: 5px;
font-size: 16px;
font-weight: bold;
}
p.keleyicom {
color: blue;
margin: 10px 20px;
font-size: 16px;
padding: 5px;
font-weight: bolder;
}
.hilite {
background: yellow;
}
</style>

<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>

<ul class="keleyi">
<li>One</li>
<li>Two</li>
<li class="hilite">Three</li>
<li>Four</li>
</ul>

<ul class="keleyi">
<li>Five</li>
<li>Six</li>
<li>Seven</li>
</ul>

<ul class="keleyi">
<li>Eight</li>
<li class="hilite">Nine</li>
<li>Ten</li>
<li class="hilite">Eleven</li>
</ul>

<p class="keleyicom">Unique siblings: <b></b></p>

<script>
var len = $( ".hilite" ).siblings()
.css( "color", "red" )
.length;
$( "b" ).text( len );
</script>



效果：

• One
• Two
• Three
• Four

• Five
• Six
• Seven

• Eight
• Nine
• Ten
• Eleven

Unique siblings: