Question

我很好奇为什么firstChild-object在以下代码中返回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

因为你做错了：使用for(key in jQueryObject) {来迭代jQuery集合。循环不仅迭代集合中的选定元素。它遍历所有对象属性，即divs[ind]可以是jQuery方法或属性之一，而不仅仅是DOM元素。

由于jQuery对象是一个类似于数组的对象，因此它具有引用所选元素的数字属性。但对于其他属性和方法，循环将失败。

假设您只有一个.post元素：

在第一次迭代中，ind为0，它引用集合中第一个选定的元素。

在第二次迭代中，ind为length。 divs[ind]返回集合的length而不是DOM元素。其他jQuery属性和方法也是如此，它是其他继承的属性。

此外，由于对象属性的顺序未定义，因此您可能会在不同的浏览器上获得不同的结果。

<小时/> 要迭代jQuery集合，请使用.each方法。

Answer 2

HTML文档中的<div class="post">和<h4>标记之间有空格。访问div的{{3}}属性会返回包含此空格的文本节点。文本节点没有innerHTML属性，因此您获得undefined结果。

访问文本节点的firstChild属性会返回空格后的节点<h4>元素。

要直接访问作为元素的第一个子项（跳过文本节点），您可以使用nextSibling属性而不是firstChild。

代码中的for循环也存在问题。这将遍历JQuery集合的所有属性，而不仅仅是索引。您应该使用JQuery的firstElementChild方法。

使用div和.each()迭代firstElementChild元素：

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

使用JQuery选择具有.each()选择器的第一个元素子项：

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

Javascript：firstChild对象返回undefined

2 个答案: