siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
jQuery 的遍历方法siblings()
$("给定元素").siblings(".selected") //如果同级返回有其他的元素是不需要操作的,需要给定要操作的元素
其作用是筛选给定的同胞同类元素(不包括给定元素本身)
例子:网页选项栏
当点击任意一个选项卡是,另外选项卡就会改变样式,其内容也会隐藏。
<style>
.qieh_title span {
display: inline-block;
100px;
height: 50px;
}
.qieh_cont ul {
display: none;
float: left;
}
.one {
color: red;
}
</style>
<div class="qieh">
<div class="qieh_title">
<span class="one">点击切换1</span>
<span>点击切换2</span>
</div>
<div class="qieh_cont">
<ul style="display: block;">
<li>切换1</li>
<li>切换1</li>
<li>切换1</li>
</ul>
<ul>
<li>切换2</li>
<li>切换2</li>
<li>切换2</li>
</ul>
</div>
</div>
<script>
$(function () {
$(".qieh_title span").each(function (index) {
$(this).click(function () {
$(".qieh_title .one").removeClass("one"); // 移除之前的样式
$(this).addClass("one"); //增加当前选择的样式
$(".qieh_cont ul").eq(index).show().siblings().hide();
});
})
})
</script>