如何隱藏父子li元素，其子元素ul-li元素都是使用jQuery隱藏的？

我有一組嵌套UL的，看起來是這樣的：如何隱藏父子li元素，其子元素ul-li元素都是使用jQuery隱藏的？

<ul id="educationList"> 
    <li class="category"><p>Media production</p> 
     <ul> 
      <li class="education" style="display: block;"> 
      <a href="#">Real time 3D animation</a> 
      </li> 
      <li class="education" style="display: block;"> 
      <a href="#">Filming with Steadicam</a> 
      </li> 
      <li class="education" style="display: block;"> 
      <a href="#">Sound Effects</a> 
      </li> 
     </ul> 
    </li> 
</ul>

頂部UL（educationList）持有的類別列表，並且每個類別都有一個子列表（UL）與的教育之類這一類。一個經典的嵌套列表結構。在上面的示例代碼中，我只有一個類別 - 在真實代碼中有很多類別。

我有一個jQuery過濾函數，顯示/隱藏li類元素，具有類「教育」（子列表元素）。有時，這種過濾功能隱藏所有子列表元素，使HTML看起來像這樣：

<ul id="educationList"> 
    <li class="category"><p>Media production</p> 
     <ul> 
      <li class="education" style="display: none;"> 
      <a href="#">Real time 3D animation</a> 
      </li> 
      <li class="education" style="display: none;"> 
      <a href="#">Filming with Steadicam</a> 
      </li> 
      <li class="education" style="display: none;"> 
      <a href="#">Sound Effects</a> 
      </li> 
     </ul> 
    </li> 
</ul>

所不同的是，現在所有子列表所有元素均具有內嵌樣式顯示：無。突然之間，我沒有真正使用父類裏的「類」類，因爲在這個類別下沒有教育。

現在，我正在尋找一個聰明的方法來找到所有沒有明顯的兒童教育列表項目的類別列表項目，並簡單地隱藏類別列表項目。每次我進行任何過濾時，我都必須運行此功能，因爲過濾將影響子教育列表項目 - 某些可見的地方將被隱藏，有些隱藏的地方會再次可見。

另外 - 我會有很多元素，所以如果代碼不是太耗資源，這是一個優勢。儘管如此，這還不是挑剔的時候。任何解決方案都可以，我將不得不在稍後進行優化。

提前致謝！ /托馬斯·卡恩

來源

2011-03-14 tkahn

這是簡單方便的jQuery的解決方案，並不能完全忽視資源的使用情況：

$('li.category').each(function() { 
    var $li = $(this); 
    if(!$li.find('li:visible').length) { 
    $li.hide(); 
    } 
});

如果您需要優化性能，你可以這樣做，而不是，它不具備在.each的開銷：

var categories = $('li.category'); 
for(var i=0,category;category = categories.eq(i);i++) { 
    if(!category.find('li:visible').length) { 
    category.hide(); 
    } 
}

編輯：在優化版本修正了

來源

2011-03-14 14:46:18

+1用於優化考慮。 – 2011-03-14 14:59:41

你的兩個例子中的第一個完美工作！我必須添加一個$（「li.category」）。show（）;在我每次運行功能思想之前，隱藏父母都會自動隱藏所有的孩子，但在此之後它就像魅力一樣工作。在第二個例子中，我不得不在if子句中和hide命令之前用$（category）替換category，但之後它運行得非常好！ – tkahn 2011-03-14 15:15:56

你的第二個例子失敗了.find不是類別的功能。你需要'$（category）'來代替每個'category' – Jamiec 2011-03-14 15:20:40

$("li.category").each(function(){ 
    if($(this).find("li:visible").size() == 0)$(this).hide(); 
});

來源

2011-03-14 14:46:48

這很好用！謝謝！ – tkahn 2011-03-14 15:17:33

這應該是簡單的：

$('li.category:not(:has(li:visible))').hide();

活生生的例子：http://jsfiddle.net/wTKEQ/

如果你運行它原樣，則該類別將被隱藏。如果您將一個或多個子項目更改爲display:block，則不會發生任何情況。

來源

2011-03-14 14:49:17 Jamiec

這也正好是您可以做到的最耗費資源的方式：P – 2011-03-14 14:52:28

仍然非常酷，我不認爲會有像它們那樣的一千個。 – 2011-03-14 14:54:30

@Eugene：如果你讀到這個問題，它清楚地表明會有很多元素，並且性能方面的考慮是一個優點。當一個OP明確指出這一點時，無論我的觀點如何，單線球員如何搖擺你的世界，給他最慢的答案並不是很酷。 – 2011-03-14 15:03:43

$("li.category").each(function(){ 
if($(this).find("li.education").css("display")=="none") 
{ 
$(this).hide(); 
} 
});

來源

2013-10-20 13:09:49 unknown

如何隱藏父子li元素，其子元素ul-li元素都是使用jQuery隱藏的？

回答

相關問題