Filter durch Elemente und nur Elemente mit Text auswählen

Question

<div id="page-content"> 
    <ul> 
    <li>Text</li> 
    <li>Text 2 </li> 
    </ul 
    <div class="heading"> 
    <h2>Heading</h2> 
    </div> 
</div> 

Ich habe den obigen HTML-Code als Beispiel. Ich möchte durch jedes der Elemente filtern und nur eine Klasse zu Elementen mit Text hinzufügen. Ich habe einige unter jQuery:

$(document).ready(function(){ 
    $('#page-content').find('*').each(function(){ 
    if ($(this).text().trim().length){ 
     $(this).addClass('yay'); 
    } 
    }); 
}); 

Der Code jedes Element in der Seite-Content-Element finden und prüft, ob es sich um Text hat und fügen Sie die Klasse ‚yay‘. Das funktioniert, aber es gibt dem Elternelement die Klasse, wenn sein Kind Text enthält. z.B. Es wird die <ul> die Klasse geben, weil die <li> Text hat.

Gibt es etwas falsch mit dem Code, den ich verwende, oder muss ich ein komplett anderes Skript verwenden, um nur eine Klasse auf Elemente mit Text anzuwenden?

HINWEIS Die HTML erzeugt, so könnte ich mit einem <ol> anstelle eines <ul> oder ein <a> Tag enthalten innerhalb # page-Gehalt am Ende.

Answer 1

Sie können den Code ändern, um zu überprüfen, ob das Element über untergeordnete Elemente verfügt, und die Klasse nur hinzufügen, wenn es sich um einen Textknoten handelt. Wenn der HTML-Code jedoch nicht gut formatiert ist, kann dies zu Problemen führen.

$(document).ready(function() { 
     $('#page-content').find('*').each(function() { 
      if ($(this).children().length == 0 && $(this).text().trim().length) { 
       $(this).addClass('yay'); 
      } 
     }); 
    });