Question

我在练习JQuery。

html()

我的html()功能正常运作

<span>Hello</span>
<div></div>
<div></div>
<div></div>

(function(){

    $('div').html('<span>Hello <b>Again</b></span>');

})();

但是当我放入bootstrap类时它会停止工作。是什么原因？

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <span>Hello</span>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

Answer 1

$('div')会为您提供所有div的清单，包括

div.container div.row div.col-lg-12 div div div

.html('<span>Hello <b>Again</b></span>')将遍历它们并将其HTML内容更改为您提供的内容。实际上，div.container的内容一旦被span替换，其他div就不会保留在DOM中。因此，您必须以某种方式将需要更改的div与不需要的div区分开来。

div.col-lg-12 > div可以是一种可能的选择。它指的是div div class的直接孩子col-lg-12 $('div')

不要认为div只会在没有课程的情况下选择DOM 名。它实际上会选择标记名为div的{{1}}中的所有节点，而不管其类名或id。

Answer 2

你必须找到具有div的类或id的特定div，如

$('div.col-lg-12').html('<span>Hello <b>Again</b></span>');

它会像你期望的那样在里面添加html。

Answer 3

您需要为$('div.col-lg-12').html(...)

指定div的cssclass

如何使用Html（）JQuery

3 个答案: