Q:

jquery hide div for each empty span within it

Basically, I have this dynamic HTML:
<div id="downloadSection">
            <a id="linkD" href="x.pdf"> 
                <span id="y">.pdf</span>
            File
            </a> <br>
</div>

Note that <div id="downloadSection"> appears multiple times in the document and has different values.
I need to build a function that searches all these divs, and if the span within <a id="linkD"> within <div id="downloadSection"> has a 0 length, I want to add the .nothere class to the div.
I have tried this:
$("#postBody").each(function () {
                if ($("span#linkD").length == 0) {
                    $("#downloadSection").addClass("nothere");
                }
            });

, and only the first one is hidden. Note that #postBody is nesting this div.
Any ideas?

A:

First of All, don't use duplicate Id's use class instead
Html -
<div class="downloadSection">
            <a class="linkD" href="x.pdf"> 
                <span class="y">.pdf</span>
            File
            </a> <br>
</div>

js:
$('.downloadSection').each(function(){
   if($.trim($(this).find('.linkD span').text()).length === 0){
     $(this).addClass('nothere');
   }
});

