Question

我有以下代码：

var data = "<div><p class='a'>Text</p></div>";
$(data).find(".a").each(function(){
    $(this).addClass("b");
})

console.log(data);   //will output: <div><p class='a'>Text</p></div> 
                     //instead of <div><p class='a b'>Text</p></div>

我正在迭代一个jQuery对象$(data)，我正在改变孩子<p />的类。但是，当我在更改后输出数据时，类.b消失了。

为什么会这样，我怎样才能让它发挥作用？

Answer 1

您需要存储DOM元素创建的结果。字符串本身永远不会被修改。

var data = "<div><p class='a'>Text</p></div>";

// Create the elements from the markup
var elems = $(data);

// Modify the elements
elems.find(".a").each(function(){
    $(this).addClass("b");
});

// Append the elements to the DOM
elems.appendTo("body");

您实际上可以将代码缩短为：

$(data).appendTo("body").find(".a").addClass("b");

Answer 2

在您的情况下，var data是一个字符串。

但是当你$(data)转换为jQuery对象并存储在内存中时。新类b被添加到jQuery对象而不是字符串data

您可以尝试这样的事情

var data = "<div><p class='a'>Text</p></div>";

var $data = ""; // to store the jquery object

$data = $(data); // converts string to jQuery object

$data.find(".a").each(function(){
   $(this).addClass("b");   
})

console.log($data.get(0).outerHTML); //<div><p class='a b'>Text</p></div>

Answer 3

原因是，您没有修改字符串data

当你说$(data)时，它会从字符串中创建一个dom结构，然后在那之后操作dom

Answer 4

我认为你需要做这样的事情：

var data = "<div><p class='a'>Text</p></div>";
$(data).find('.a').each(function(){
    $(this).addClass("b");
}).appendTo('body'); //replace body with the target container

在jQuery中更改子进程不会在父进程中保留

4 个答案: