Home > Article > Web Front-end > Summary of usage of siblings() in jQuery

Summary of usage of siblings() in jQuery

巴扎黑Original: 2017-06-24 10:19:282208browse

siblings() Get the siblings of each element in the matching set. Filtering by selector is optional. Next, this article will introduce to you jQuery detailed usage examples of siblings(). Friends who need it can refer to it

siblings() to obtain the siblings of each element in the matching set through the selector. Filtering is optional.

jQuery’s traversal method siblings()

$("给定元素").siblings(".selected")

Its function is to filter the given sibling elements of the same type (excluding the given element itself)

Example: Web page option bar

When you click on any tab, the other two tabs will change their styles and their contents will be hidden.

#The following is the html code.

<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎您来到电器城</li>
<li>二手市场，产品丰富多彩</li>
</ul>
</body>

jQuery code

<script type="text/javascript">
$(function() {
$("#menu li").each(function(index) { //带参数遍历各个选项卡
$(this).click(function() { //注册每个选卡的单击事件
$("#menu li.tabFocus").removeClass("tabFocus"); //移除已选中的样式
$(this).addClass("tabFocus"); //增加当前选中项的样式
//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" + index + ")").show()
.siblings().hide();//#menu与#content在html层没有嵌套关联，但因为其ul序列相同，用index值可以巧妙的将两者关联。
});
});
})
</script>

where

When the corresponding tab is clicked, the content of the clicked tab will be show(). The other two sibling elements 25edfb22a4f469ecb59f1190150159c6 tabs are filtered out using silibings() and hide() removed.

In this way, the content of the clicked area can be dynamically displayed, while the other two tabs can be hidden.

And (".selected") in

$("给定元素").siblings(".selected")

means filtering sibling elements with the given element class name .selected (excluding the given element itself)

The above is the detailed content of Summary of usage of siblings() in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery.siblings() function usageNext article：Detailed explanation of jQuery.siblings() function usage

See more

Summary of usage of siblings() in jQuery

Related articles