javascript - 在 jQuery 中更改子项不会保留在父项中

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)，并且正在更改 child 的类<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