Как скрыть родительский div, если все его дочерние div скрыты?
У меня есть динамически созданные div вроде этого ..
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
Я использую этот скрипт для фильтрации результатов ...
$(document).ready(function(){
$("#search").on("keyup", function()
{
var value = $(this).val().toLowerCase();
$(".child").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
Это работает отлично, я хочу добиться того, чтобы предположить, что значение поиска не совпадает ни в одном из дочерних элементов первого div, тогда оно также должно скрыть родительский div, то есть первый div.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Прокрутите список родителей и проверьте, все ли дети скрыты:
$('.parent').show();
$('.parent').each(function() {
if (!$(this).find('.child:visible').length) {
$(this).hide();
} else {
$(this).show();
}
})
Его рабочий файл, но когда я меняю значение в #search, родительский div, который только что был скрыт, скрывается только ... как показать их обратно
Да исправить. Я дополнил приведенный выше код предложением else, спасибо.
Поправил еще раз, спасибо. Похоже, скрытых родителей он не прошел. Поэтому перед зацикливанием обязательно сделать их все видимыми.
Ваш код работал ... но он замедлил мою страницу ... опция поиска при вводе текста отстает при использовании вашего кода ... пожалуйста, помогите мне его оптимизировать
Для ввода нужно использовать debounce. Пример можно найти здесь: stackoverflow.com/questions/51837825/…
попробуй это
$(document).ready(function(){
$("#search").on("keyup", function()
{
var value = $(this).val().toLowerCase();
$(".child").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
//here is the code to hide
$(".parent").each(function() {
if ($(this).find('.child:visible').length===0)
$(this).hide();
else
$(this).show();
});
});
});
Его рабочий файл, но когда я меняю значение в #search, родительский div, который только что был скрыт, скрывается только ... как показать их обратно
в другой части просто покажите это снова., обновив код.
Этот аналогичен приведенному выше, за исключением того факта, что вы можете использовать toggle_visibility() и в других местах.
function toggle_visibility() {
if (!$(this).find('.child:visible').length) {
$(this).hide();
}
else {
$(this).show();
}
}
$('.parent').each(toggle_visibility)
Почему вы используете
filter, ничего не возвращая, и он работает нормально?