我有一个div,它只存在于内存中,可能包含零个或多个图像。我正在尝试使用JQuery查找更改thouse图像的src,问题是即使我经理设置每个img的src,div的内容仍保持不变。
function contentWithReplacedImages(divContent){
console.log(divContent);//I get <div class='editable singleColumnElement'><p>asdasd ad a dasd ad<br/></p><p><img/> <br/></p></div>
$(divContent).find("img").each(function(index){
$(this).attr({
'src':"imgSrc"
});
console.log($(this).attr('src'));//I get "imgSrc"
});
console.log(divContent); //divContent remains unchanged.
}
答案 0 :(得分:5)
您已经更改了$(divContent)
(jQuery对象),但最后您正在检查原始divContent
(html字符串)的内容。
由于divContent
实际上不是DOM的一部分,因此您无法在任何地方保存更改。
尝试设置新变量:
function contentWithReplacedImages(divContent) {
var $temp = $(divContent); // jQuery object
$temp.find("img").each(function (i,el) {
$(el).attr({
'src': "imgSrc.jpg"
}); // $temp is modified in place
});
console.log($temp.html()); // displays the modified string
}
答案 1 :(得分:2)
这会创建一个新元素......
$(divContent)
然后,您可以在该新元素中找到图像并更改src属性。你在任何时候都没有改变divContent
本身。
试试这个......
function contentWithReplacedImages(divContent){
console.log(divContent);
var $divContent = $(divContent);
$divContent.find("img").each(function(index){
$(this).attr({
'src':"imgSrc"
});
console.log($(this).attr('src'));
});
divContent = $divContent.html();
console.log(divContent);
}
contentWithReplacedImages("<div class='editable singleColumnElement'><p>asdasd ad a dasd ad<br/></p><p><img/> <br/></p></div>");