jQuery siblings()用法實(shí)例詳解

2019-11-20 10:12:46

字體：大中小

供稿：網(wǎng)友

siblings() 獲得匹配集合中每個(gè)元素的同胞，通過(guò)選擇器進(jìn)行篩選是可選的。

jQuery 的遍歷方法siblings()

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

其作用是篩選給定的同胞同類(lèi)元素（不包括給定元素本身）

例子：網(wǎng)頁(yè)選項(xiàng)欄

當(dāng)點(diǎn)擊任意一個(gè)選項(xiàng)卡是，其他2個(gè)選項(xiàng)卡就會(huì)改變樣式，其內(nèi)容也會(huì)隱藏。

下面是html代碼。

<body><ul id="menu"><li class="tabFocus">家居</li><li>電器</li><li>二手</li></ul><ul id="content"><li class="conFocus">我是家居的內(nèi)容</li><li>歡迎您來(lái)到電器城</li><li>二手市場(chǎng)，產(chǎn)品豐富多彩</li></ul></body>

jQuery代碼

<script type="text/javascript">$(function() {$("#menu li").each(function(index) { //帶參數(shù)遍歷各個(gè)選項(xiàng)卡$(this).click(function() { //注冊(cè)每個(gè)選卡的單擊事件$("#menu li.tabFocus").removeClass("tabFocus"); //移除已選中的樣式$(this).addClass("tabFocus"); //增加當(dāng)前選中項(xiàng)的樣式//顯示選項(xiàng)卡對(duì)應(yīng)的內(nèi)容并隱藏未被選中的內(nèi)容$("#content li:eq(" + index + ")").show().siblings().hide();//#menu與#content在html層沒(méi)有嵌套關(guān)聯(lián)，但因?yàn)槠鋟l序列相同，用index值可以巧妙的將兩者關(guān)聯(lián)。});});})</script>

其中