Question

我需要传递一些HTML代码作为参数，但是，在我传递它之前，我需要更改一些src属性值。

我不能使用lastIndexOf或其中任何一个来修改html值，因为我不知道src会有哪些值。

我试图做的是创建一个包含html的对象，然后只改变该对象。我不想改变实际的网页。

这可能吗？

我先做的是：

$('[myImages]').each(function() {
var urlImg = "../tmpFiles/fileName" + counter;
$(this).attr('src', urlImg);
counter++;
});

最后，我得到了这样的代码：

myformData = { theChartCode: $('#TheDivContainingTheHTML').html() }

但是，这实际上会更改网页上的图片来源，我不想这样做。

然后我想我可以使用html创建一个JQuery对象，所以我可以像这样改变那个对象：

var $jQueryObject = $($.parseHTML($('#TheDivContainingTheHTML').html()));

但现在，我无法弄清楚如何在该对象中进行迭代，以便更改所需图像的src属性值。

真的很感激任何帮助;）

Answer 1

根据您想要更改对象的时间，解决方案将有所不同。在您单击页面中的其他元素后，我们假装您要更改它。您的代码将如下所示：

var clonedHTML;
$('#clickable-element').click(function() {
    var $originalHTML = $(this).find('.html-block');
    var $cloneHTML = $originalHTML.clone();
    $cloneHTML.find('.my-image').attr('src', 'newSrcValue');

    clonedHTML = $cloneHTML.clone();
    return false; //Prevents click to be propagated
});

//Now you can use `clonedHTML`

这里的关键点是克隆方法：http://api.jquery.com/clone/。

Answer 2

有几种方法可以做到这一点。首先是创建目标元素的克隆并在Fly上使用相同的元素。你可以这样做：

var Elem = $（＆＃39;＃TheDivContainingTheHTML＆＃39;）。clone（）;

现在做任何你想做的事情，如迭代，改变，插入，删除。

var allImages = $（Elem）.children（＆＃34; img＆＃34;）;

非常感谢！

Answer 3

您可以clone元素：

var outerHTML = $collection.clone().attr('src', function(index) {
    return "../tmpFiles/fileName" + index;
}).wrapAll('<div/>').parent().html();

您还可以使用map方法：

var arr = $collection.map(function(i) {
     return $(this).clone().attr('src', '...').prop('outerHTML');
}).get();

迭代一个新的JQuery对象

3 个答案: