jQuery siblings() 사용법에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:03:501755검색
siblings() 일치하는 집합에 있는 각 요소의 형제를 가져옵니다. 선택기로 필터링하는 것은 선택 사항입니다.
jQuery의 순회 메소드 siblings()
$("给定元素").siblings(".selected")
이 기능은 주어진 형제 요소를 필터링하는 것입니다(주어진 요소 자체는 제외)
예: 웹페이지 옵션 표시줄
탭을 클릭하면 다른 두 탭의 스타일이 변경되고 해당 내용이 숨겨집니다.
다음은 html 코드입니다.
<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 코드
<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>
어느
해당 탭을 클릭하면 클릭한 탭의 내용이 표시()됩니다. 다른 두 형제 요소 25edfb22a4f469ecb59f1190150159c6 탭은 silibings() 및 hide() 제거를 사용하여 필터링됩니다.
이렇게 하면 클릭한 영역의 내용이 동적으로 표시되고 다른 두 탭은 숨겨질 수 있습니다.
그리고
$("给定元素").siblings(".selected")
의 (".selected")는 .selected라는 지정된 요소 클래스의 형제 요소를 필터링한다는 의미입니다(주어진 요소 자체는 제외).
위 내용은 jQuery siblings() 사용 예제에 대한 자세한 설명입니다. 모든 분들께 도움이 되길 바랍니다!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.