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

Ответ 1

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

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

Ответ 2

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

div:empty {
  display:none;
}

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 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();            
    }           
})

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

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

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

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

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

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