Скрыть div, если они пусты

Question

У меня есть некоторые div, которые могут быть пустыми (в зависимости от логики на стороне сервера).

<div id="bar">

<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>

</div>

Если у них нет HTML внутри div (с разделом класса), я просто хочу скрыть их.

Как я могу это сделать?

Answer 1

jQuery имеет селектор :empty.Итак, вы можете просто сделать:

$('div.section:empty').hide();

Answer 2

Вот CSS3 решение для всех, кто интересуется

div:empty {
  display:none;
}

Answer 3

Если div содержит пробелы или разрывы строк, этот код может быть полезен ...

$(document).ready(function() {
   str = $('div.section').text();
   if($.trim(str) === "") {
     $('div.section').hide();
   }
});

Answer 4

Почему никто не использует .filter?

$("div.section").filter(function() {
    return this.childNodes.length === 0;
}).hide();

Это более элегантное решение по сравнению с использованием .each.

Answer 5

Вариантов много, все зависит от ваших предпочтений. Чем более компактный ответ, тем менее читаемым он становится, это важно для скорости, и насколько эффективной должна быть пустая функция, элемент, не содержащий узлов, не совпадает с элементом :empty.

Самый компактный / медленный / очень эффективный / читаемый / универсальный селектор

$('.section:empty').hide();

Очень компактный / немного быстрее (все еще медленный) / Очень эффективный / читаемый / менее универсальный селектор

$('div.section:empty').hide();

Компактный / Быстрый / Очень эффективный / читаемый / специальный селектор

$("#bar").find('div.section:empty').hide(); 

Я собираюсь придерживаться более специфичного селектора, поскольку он быстрее.

Менее компактный / еще быстрее / очень эффективный / еще менее читаемый

$("#bar").find('div.section').filter(function(i,elem) {

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return false;
        }
    }
    return true;

}).hide();

Еще менее компактно / Еще быстрее Все еще / Очень эффективно / еще менее читабельно

$("#bar").find('div.section').each(function(i,elem){

    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
        if ( elem.nodeType < 6 ) {
            return;
        }
    }
    $(this).hide();        
})

Компактный / намного быстрее / менее эффективный / менее читаемый

// Faster Still but less precise
$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();

Меньше Компактный / Гораздо быстрее Еще / Меньше Эффективного / Меньше читаемого

$("#bar").find('div.section').each(function(){
    if(!this.firstChild){
        $(this).hide();            
    }           
})

Эффективное решение

Более эффективные решения используют тот же подход, что и «пустой» фильтр jquery , он пытается воспроизвести функциональность псевдокласса CSS3 :empty с учетом nodeType. Например, если дочерний элемент имеет nodeType == COMMENT_NODE (<!-- -->), тогда родитель будет по-прежнему рассматриваться как пустой.

Все эти подходы можно улучшить, заменив .hide() на .addClass('hide') и добавив класс .hide в свой CSS.

<style>
    .hide {
        display:none;
    }
</style>

но если это звучит как подходящее для вас решение, то @ elliot-wood's CSS3 Answer , вероятно, лучше подойдет.

Мои личные предпочтения

$("#bar").find('div.section').filter(function() {
    return !this.firstChild; 
}).hide();

Несмотря на то, что этот подход не проверяет nodeType и использует метод .filter(), а не более быстрый .each(). Это просто более компактное и удобочитаемое решение.

Answer 6

У вас есть доступ к серверной логике?

Иначе на стороне клиента вы можете сделать что-то вроде:

$(function() {
$('div').each(function() {
       if ($(this).html()=="") {
             $(this).hide();
       }
    }); 
});

Answer 7

$('div').each(function() {
if($(this).html().size() == 0) $(this).remove();
});

Если вы хотите позже использовать div на той же странице, лучше использовать $(this).hide(); вместо $(this).remove();, так как div будет удален, если вы используете remove ();

Answer 8

$('div.section:empty').css("display", "none");

Answer 9

Я использовал фильтрующий ответ, но this.childNodes.length продолжал возвращать 1 также, когда не было видимого содержимого, поэтому в итоге объединял фильтр с усечением.

$("div").filter(function() {
    return j(this).text().trim() === "";
}).hide();

Answer 10

заменить display:block; на display: none;

edit: О, я видел, что вы хотите использовать jQuery, затем используйте .hide (): http://api.jquery.com/hide/