Question

我正在尝试使用以下jQuery代码在col_box div中添加一个类col_left的div：

$('#col_left').add('div').addClass('col_box');

我的DOM树看起来像这样：

<div id="header">Header</div>
    <div class="col_container">
            <div id="col_left">
                <div class="col_box">A</div>
                <div class="col_box">B</div>
            </div>
    </div>

但是jQuery代码无效。它将类col_box添加到页面上的每个元素。

Answer 1

$('#col_left').add('div')正在将所有<div>元素添加到原始选择中。请尝试使用$('#col_left').append('<div class="col_box"></div>')代替（或.prepend）。

Answer 2

$('#col_left').add('div')表示与$('#col_left, div')相同。即“具有id'col_left'的元素和所有div元素。

如果您想选择作为col_left子项的div，请使用child combinator。

$('#col_left > div').addClass('col_box')

Answer 3

你可以使用

.append在匹配的目标

之后附加

$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);

这里是小提琴http://jsfiddle.net/R65cn/4/

Answer 4

.add()为选区添加了一个选择器，它不会创建或添加元素。

$('#col_left')表示* select element id col_left *
.add('div')表示添加所选页面的所有div

所以此时您已经选择了#col_left和所有div。
.addClass('col_box')表示*将类col_box添加到选择的所有元素*。

以下是如何创建div并将其添加到#col_left：

$('<div></div>').addClass('col_box').appendTo('#col_left');

或者：

$('<div class="col_box"></div>').appendTo('#col_left');

如何使用jQuery按ID选择元素

4 个答案: