Javascript：firstChildオブジェクトは未定義を返します

Question

firstChildオブジェクトが次のコードでundefinedを返すのはなぜですか？私はを省略すると、child = child.nextSibling;

あなたが何か間違ったことをやっているので、次の行で、私は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

呼び出した場合、それが正常に動作します：jQueryのコレクションを反復処理するためにfor(key in jQueryObject) {を使用します。 ループは、コレクション内の選択された要素を反復処理するだけではありません。すべてのオブジェクトプロパティを反復処理します。すなわち、divs[ind]は、DOM要素だけでなく、jQueryのメソッドまたはプロパティの1つになります。

jQueryオブジェクトは配列のようなオブジェクトなので、選択された要素を参照する数値プロパティを持っています。しかし、他のプロパティとメソッドでは、ループは単に失敗します。 indが0であり、それがセットの最初の選択された要素を指し、最初の反復では

：あなただけの1 .postの要素を持っていると仮定すると

。

第2回の反復において、indはlengthです。 divs[ind]は、DOM要素ではなく、コレクションのlengthを返します。これは他のjQueryのプロパティとメソッドにも当てはまり、他の継承されたプロパティです。

また、オブジェクトのプロパティの順序が定義されていないため、異なるブラウザで異なる結果が得られることがあります。

---

jQueryコレクションを反復するには、 .eachメソッドを使用します。

Answer 2

<div class="post">と<h4>タグの間にHTMLドキュメントの空白があります。 firstChildプロパティのdivにアクセスすると、この空白を含むテキストノードが返されます。テキストノードにはinnerHTMLというプロパティがないため、結果はundefinedになります。

テキストノードのnextSiblingプロパティにアクセスすると、空白文字の後のノード、<h4>要素が返されます。

要素（テキストノードをスキップする）である最初の子に直接アクセスするには、firstChildの代わりにfirstElementChildプロパティを使用できます。

コード内のforループにも問題があります。これは、インデックスだけでなく、JQueryコレクションのすべてのプロパティを繰り返し処理します。代わりに、JQueryの.each()メソッドを使用する必要があります。

.each()とfirstElementChildを使用してdiv要素を反復：

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

:first-childセレクタで最初の子要素を選択するためにはJQueryを使用して：あなたはjQueryのコレクションを反復処理する方法はありません

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