Jquery: check if fieldset are empty
<p>I need to check if any fieldset in the DOM is empty. Empty means that it has not text inside (legend is not inside). For example, this is an empty fieldset:</p>

<pre><code>&lt;fieldset&gt;
    &lt;legend&gt;a1&lt;/legend&gt;
    &lt;input type="hidden" name="x" value="y"&gt;
&lt;/fieldset&gt;
</code></pre>

<p>It has no text nodes except inside <em>legend</em>.</p>

<p>Until now I was using this JQuery to check this condition:</p>

<pre><code>    if ($(this).find(":not(legend)").text().trim() == '') {
    ...
    }
</code></pre>

<p>Note this comes from a .each() call. The problem is that now I've found that it doesn't works on nested fieldsets like this:</p>

<pre><code>&lt;fieldset&gt;
    &lt;legend&gt;a&lt;/legend&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;a1&lt;/legend&gt;
    &lt;/fieldset&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;a2&lt;/legend&gt;
    &lt;/fieldset&gt;
&lt;/fieldset&gt;
</code></pre>

<p>In this case the jquery expression:</p>

<pre><code>$("fieldset").find(":not(legend)").text().trim()
</code></pre>

<p>returns "a1 a2" as a result. What's the problem? <a href="http://jsfiddle.net/navi2000/NKyBZ/" rel="nofollow">JsFiddle</a></p>
