Изменение ребенка в 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) и я меняю класс ребенка <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

Причина заключается в том, что вы не модифицируя строку data

Когда вы говорите $(data) создает структуру DOM из строка и дом манипулируют там после

Answer 3

Я думаю, вам нужно сделать что-то вроде этого:

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 

Answer 4

В вашем случае var data - это строка.

Но когда вы делаете $(data), его преобразовали в объект jQuery и сохранили в памяти. Новый класс б добавляется объект 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>