javascript - 无法更改 .html()

Question

我有一个简单的 html(参见此处:http://plnkr.co/edit/nqfLNfYxV2B8AwsDAcNu?p=preview):

<section class="divs">
    <div>div1
        <div>div1.1.
            <div>div1.1.1</div>
            <div>div1.1.2</div>
        </div>
        <div>div1.2.</div>
    </div>
    <div>div2</div>
</section>

我想遍历所有部分 div:first-child 元素并添加一些标记以查看它是否属于该选择器。为了实现这一点，有以下代码:

$(function(){
    $('section div:first-child').each(function(index,element){
        console.log('element.html before: '+$(element).html());
        var elementHTML = '['+index+']: '+$(element).html();
        $(element).html(elementHTML);
        console.log('element.html after: '+$(element).html());
    });
});

但它仅将 [index] 添加到第一个选择器的元素的 html 中。谁能解释一下为什么吗？

<小时/>

更新

<小时/>

虽然不完全是答案，但皮特还是让我理解了这个问题。因此，为了使其正常工作，有必要进行更改

$(element).html(elementHTML);

至

$('section div:first-child')
                    .eq(index).html(elementHTML);

当然不是效率的问题，而是如何解决问题的到位。毫无疑问，真正的解决方案是使用 .prepend() 方法。

Answer 1

您的问题是 section div:first-child 的第一个实例是顶级 div (div1)，因此当您替换此 div 的 html 时，循环中的 div 2 和 3 不再存在于 dom 中，因此它们不会得到更新

无需替换 html，只需添加文本即可:

$('section div:first-child').each(function(index, element) {
  $(element).prepend('[' + index + ']: ');
});

New plunker