Как скрыть родительский li-элемент, чьи дочерние элементы ul-li скрыты с помощью jQuery? - PullRequest
Новая
       19

Как скрыть родительский li-элемент, чьи дочерние элементы ul-li скрыты с помощью jQuery?

1 голос
/ 14 марта 2011

У меня есть набор вложенных ul, которые выглядят так: 

<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>

Разница в том, что все элементы подсписка теперь все имеют встроенный стиль display: нет .Внезапно у меня нет никакой реальной пользы для родителя li с классом «категория», так как в этой категории нет образований.

Теперь я ищу умный способ найти все элементы списка категорий, у которых нет видимых элементов списка образования детей, и просто скрыть элемент списка категорий .Мне придется запускать эту функцию каждый раз, когда я выполняю какую-либо фильтрацию, потому что фильтрация повлияет на элементы списка образования детей - некоторые из них там, где они видимы, будут скрыты, а некоторые - там, где скрыты, снова станут видимыми.

Также - у меня будет много элементов, так что это преимущество, если код не слишком ресурсоемкий.Тем не менее, сейчас не время для разборчивости.Подойдет любое решение, и мне придется поработать над оптимизацией позже.

Заранее спасибо!/ Томас Кан

Ответы [ 4 ]

5 голосов
/ 14 марта 2011

Это должно быть просто: 

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

Пример в реальном времени: http://jsfiddle.net/wTKEQ/

Если вы запустите все как есть, категория будет скрытаЕсли вы измените один или несколько подпунктов на display:block, ничего не произойдет.

4 голосов
/ 14 марта 2011

Это простое и удобное решение 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();
  }
}

EDIT: исправлена ​​ошибка в оптимизированной версии

2 голосов
/ 14 марта 2011 
$("li.category").each(function(){
   if($(this).find("li:visible").size() == 0)$(this).hide();
});
0 голосов
/ 20 октября 2013 
$("li.category").each(function(){
if($(this).find("li.education").css("display")=="none")
{
$(this).hide();
}
});
...