在新的JQuery对象内部迭代

iterate inside a new JQuery object

本文关键字：内部 迭代 对象 JQuery      更新时间：2023-09-26

我需要传递一些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属性值。

任何帮助都将不胜感激；(

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

var Elem=$('#TheDivContainingTheHTML'(.clone((；

现在，您可以随心所欲地进行迭代、更改、插入、移除等操作。

var allImages=$(Elem(.childs("img"(；

非常感谢！

根据您想要更改对象的时间，解决方案会有所不同。让我们假设您想在单击页面中的另一个元素后更改它。你的代码看起来是这样的：

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/.

您可以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();
相关文章：