jQuery에서 siblings() 사용법 요약
- 巴扎黑원래의
- 2017-06-24 10:19:282252검색
siblings() 일치하는 집합에서 각 요소의 형제를 가져옵니다. 선택기로 필터링하는 것은 선택 사항입니다. 다음으로 jQuery siblings()의 자세한 사용 예를 소개하겠습니다. 필요한 친구는
siblings()를 참조하여 일치 집합의 각 요소에 대한 형제를 필터링하는 것입니다. 선택 과목.
jQuery의 순회 메소드 siblings()
$("给定元素").siblings(".selected") 해당 기능은 동일한 유형의 주어진 형제 요소를 필터링하는 것입니다(주어진 요소 자체 제외).
예: 웹 페이지 옵션 표시줄
탭이 다음과 같은 경우 예를 클릭하면 나머지 2개 탭의 스타일이 변경되고 해당 내용이 숨겨집니다.
다음은 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 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
해당 탭을 클릭하면 클릭한 탭의 내용이 표시()됩니다. 다른 두 형제 요소 25edfb22a4f469ecb59f1190150159c6 탭은 silibings() 및 hide() 제거를 사용하여 필터링됩니다.
이렇게 하면 클릭한 영역의 내용이 동적으로 표시되고 다른 두 탭은 숨겨질 수 있습니다.
그리고
$("给定元素").siblings(".selected")의 (".selected")는 주어진 요소 클래스 이름 .selected를 사용하여 형제 요소를 필터링하는 것을 의미합니다(주어진 요소 자체 제외)
위 내용은 jQuery에서 siblings() 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.