Javascript 在jQuery中更改子项不会在父项中持久化

我有以下代码：

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>

var data=“
Text
”；
$（数据）。查找（“.a”）。每个（函数（）{
$（本）.addClass（“b”）；
})
控制台日志（数据）//将输出：
文本
//而不是
文本

我正在迭代一个jQuery对象

$（数据）

，并且我正在更改子对象的类

。但是，当我在更改后输出数据时，类

.b

不见了

---

为什么会这样？我如何才能让它工作？

您需要存储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");

---

您需要存储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）

时，它会从字符串中创建一个dom结构，然后在那里操作dom，原因是，您没有修改字符串

数据

---

当您说

$（data）

时，它会从字符串创建一个dom结构，然后在那里对dom进行操作

我认为您需要这样做：

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

var data=“
Text
”；
$（数据）。查找（'.a'）。每个（函数（）{
$（本）.addClass（“b”）；
}).附于（“主体”）//将主体替换为目标容器

我认为您需要这样做：

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

var data=“
Text
”；
$（数据）。查找（'.a'）。每个（函数（）{
$（本）.addClass（“b”）；
}).附于（“主体”）//将主体替换为目标容器

在您的案例中，

var数据是一个字符串

但是当您执行
$（数据）
时，它将转换为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>

var data=“
Text
”；
var$data=“”；//存储jquery对象的步骤
$data=$（数据）；//将字符串转换为jQuery对象
$data.find（“.a”）.each（函数（）{
$（本）.addClass（“b”）；
})
log（$data.get（0.outerHTML）//
文本
在您的案例中，
var数据是一个字符串

但是当您执行
$（数据）
时，它将转换为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>

var data=“
Text
”；
var$data=“”；//存储jquery对象的步骤
$data=$（数据）；//将字符串转换为jQuery对象
$data.find（“.a”）.each（函数（）{
$（本）.addClass（“b”）；
})
log（$data.get（0.outerHTML）//
文本
我的问题简化了很多。很明显，在我的例子中，每个都不是必需的，但在我的现实生活例子中却是。@Horen:好的，但这只是一个旁注。关键是您需要引用新DOM元素的创建，因为jQuery不进行字符串操作……如果您想查看新标记，请抓取第一个元素，并使用
.outerHTML
，例如：
elems[0]。outerHTML
我的问题简化了很多。很明显，在我的例子中，每个都不是必需的，但在我的现实生活例子中却是。@Horen:好的，但这只是一个旁注。关键是您需要引用新DOM元素的创建，因为jQuery不进行字符串操作……如果您想查看新标记，请抓取第一个元素，并使用
.outerHTML
，例如：
elems[0]。outerHTML
@Horen
$（数据）
返回一个将被修改的DOM结构，更改
console.log（数据）到
console.log（$（数据））仍然不显示changes@Horen
$（数据）
返回将被修改的dom结构，更改
console.log（数据）到
console.log（$（数据））仍然不显示更改我不想在更改类之前将数据追加到正文中。我不想在更改类之前将数据追加到正文中。