您的位置:首页 - jQuery
JQ的siblings()
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

语法
.siblings(selector)

其中selector为:字符串值,包含用于匹配元素的选择器表达式。

详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素,并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。

实际应用:http://keleyi.com/a/bjad/ifjrn3s1.htm


例子一:

代码:

<script type="text/javascript" src="http://keleyi.com/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.com/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.com/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:

本站导航
相关文章
柯乐义 Copyright© keleyi.com