使用jQuery來定位元素父母

我有下面的列表，我需要能夠隱藏所有接受的東西，實際上與焦點類活動。使用jQuery來定位元素父母

<Ul> 
     <Li>something</li> 
      <ul> 
      <li>Something</> 
      <li>Something</> 
      </ul> 
     <Li>something</li> 
     <Li>something</li> 
     <Li> 
      <Ul> 
       <Li class="active">something</li> 
       <Li>omething</li> 
      </Ul> 
     </li> 
     <Li>something</li> 
    </Ul>

我需要能夠在不相關的底層一個與活動類的所有立使用.hide（）

其結果將是

<Ul> 
    <Li>something</li> 
    <Li>something</li> 
    <Li>something</li> 
    <Li> 
     <Ul> 
      <Li class="active">something</li> 
      <Li>omething</li> 
     </Ul> 
    </li> 
    <Li>something</li> 
</Ul>

來源

2013-02-04 Rob

[你嘗試過什麼？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） –

的$幾乎每個組合（ '.active'）。parent（'Li'）。hide（）我能想到，但它總是刪除直接父母和所有兄弟姐妹。我只需要隱藏頂層李的所有兄弟姐妹。 – Rob

你可以traverse up the DOM喲找到第一級li元素和它的兄弟姐妹。如果你只有兩個層次，這應該工作：

$('li.active').parent().closest('li').siblings().children('ul').hide();

如果有兩個以上的水平，我建議給根ul類或ID：

$('li.active').closest('#root > li').siblings().children('ul').hide();

來源

2013-02-04 00:49:58

這對我來說很有用。在我的實際應用程序中，我需要將子項隱藏到不相關的li。看到我上面的編輯。 – Rob

@Rob：然後通過改變我的解決方案來選擇'... siblings（）。children（'ul'）。hide（）;'（我更新了它）。查看所有可用的遍歷方法並閱讀他們的文檔。它最終會爲你節省很多時間。 –

完美。謝謝。向上，向下，並在側身的dom讓我的頭旋轉。 – Rob

$('li:not(.active,.active ~ li,.active li,:has(.active))').hide();

這選擇所有li元素，但不包括（通過使用:not()）：

.active - 活性li元件本身
.active ~ li - 同胞活性li元件
.active li的li元素 - 活性li元件的後代li元件
has(.active) - 具有活性li元素作爲其後代li元件

jsfiddle demo

如果你想保持顯示活動li元素的兄弟姐妹的繼承者，加.active ~ li li到:not()選擇：

$('li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))').hide();

jsfiddle demo

跟進OP的第一個評論這個答案：

只需在初始選擇器之前添加一個li：

$('li li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))').hide();

jsfiddle demo

來源

2013-02-04 01:54:43

謝謝。但是我需要保留最上面的李並且擺脫其他李的任何與我的主動元素無關的孩子。看我上面的例子。 – Rob

謝謝。我會給你一個鏡頭 – Rob

@Rob關於你的第一個評論：這不是最初要求的一部分。但是，請參閱我的更新答案。 –

使用jQuery來定位元素父母

回答

相關問題