Javascript: firstChild Objekt gibt undefined zurück

Question

Ich bin neugierig, warum das FirstChild-Objekt im folgenden Code undefined zurückgibt? WENN ich weglasse child = child.nextSibling;

Es funktioniert gut, wenn ich in der nächsten Zeile ruft nextSibling

divs = $('.post') 
    for(ind in divs){ 
    div = divs[ind]; 
    var child = div.firstChild; 
    child = child.nextSibling; //omitting this causes undefined 
    alert (child.innerHTML); 
    } 

html

..... 
     <div class="post"> 
       <h4> 
        HEADER 
       </h4> 
       <div class="content"> 
        <p> 
         text goes here 
        </p> 
       </div> 
     </div> 
    ...... 

Answer 1

Weil Sie etwas falsch zu machen sind: for(key in jQueryObject) { zur Iteration durch eine jQuery Sammlung verwenden. Die Schleife durchläuft nicht nur die ausgewählten Elemente in der Sammlung. Es durchläuft alle Objekteigenschaften, d. H. Die divs[ind] kann eine der jQuery-Methoden oder -Eigenschaften sein und nicht nur ein DOM-Element.

Da das jQuery-Objekt ein Array-ähnliches Objekt ist, verfügt es über numerische Eigenschaften, die sich auf ausgewählte Elemente beziehen. Aber für andere Eigenschaften und Methoden wird die Schleife einfach fehlschlagen.

Sie Unter der Annahme, haben nur ein Element .post:

In der ersten Iteration die ind 0 ist, und es bezieht sich auf das erste ausgewählte Element in der Serie.

In der zweiten Iteration ist indlength. divs[ind] gibt die length der Sammlung und kein DOM-Element zurück. Dies gilt auch für andere jQuery-Eigenschaften und -Methoden und andere vererbte Eigenschaften.

Auch da die Reihenfolge der Objekteigenschaften undefiniert ist, können Sie unterschiedliche Ergebnisse in verschiedenen Browsern erhalten.

---

durch die jQuery Sammlungen zur Iteration verwenden, um die .each Methode.

Answer 2

Zwischen den Tags <div class="post"> und <h4> befinden sich Leerzeichen in Ihrem HTML-Dokument. Der Zugriff auf die -Eigenschaft von div gibt Ihnen den Textknoten zurück, der dieses Leerzeichen enthält. Textknoten haben keine innerHTML Eigenschaft, so dass Sie ein undefined Ergebnis erhalten.

Der Zugriff auf die nextSibling-Eigenschaft des Textknotens gibt den Knoten nach dem Leerzeichen, dem <h4>-Element, zurück.

Um direkt auf das erste Kind zuzugreifen, das ein Element ist (überspringende Textknoten), können Sie die firstElementChild-Eigenschaft anstelle von firstChild verwenden.

Es gibt auch ein Problem mit der for-Schleife in Ihrem Code. Dadurch werden alle Eigenschaften der JQuery-Auflistung und nicht nur die Indizes durchlaufen. Sie sollten stattdessen die Methode .each() von JQuery verwenden.

Iterieren die div Elemente mit .each() und firstElementChild:

var divs = $('.post'); 
divs.each(function() { 
    var div = this;  
    var child = div.firstElementChild; 
    alert(child.innerHTML); 
}); 

JQuery Mit dem ersten Element Kind mit dem :first-child Wähler wählen:

$('.post>:first-child').each(function() { 
    alert(this.innerHTML); 
});