Question

I’m trying to get one div to show if another is empty. This needs to happen multiple times throughout a page. The script won’t work in its present state.

Script:

$('.standard_page_list_result').each(function(){

if ($('.children p').length == 0)
    $('.summary').css("display", "block");

});

HTML:

<div class="standard_page_list_result"><div class="children"><p>Hello</p></div>
<div class="summary"><p>Goodbye</p></div></div>

<div class="standard_page_list_result"><div class="children"><p>Hello</p></div>
<div class="summary"><p>Goodbye</p></div></div>

<div class="standard_page_list_result"><div class="children"><p>Hello</p></div>
<div class="summary"><p>Goodbye</p></div></div>

<div class="standard_page_list_result"><div class="children"><p></p></div>
<div class="summary"><p>Hello!</p></div></div>

CSS:

.summary { display: none; }

Answer 1

Using your same concept, you need to identify the one your in with this and then do a find selector in order to make it work. what you were doing was getting the length of all.

$('.standard_page_list_result').each(function(){
    if ($(this).find('.children p').text().length == 0)
        $(this).find('.summary').css("display", "block");
});

Here is the jsFiddle for you

http://jsfiddle.net/JoshuaPack/4C35E/