1

我有一个试图更新属性的 HTML 字符串，但我似乎看不到更改。这是一个简化的示例：

var source = '<html><head></head><body><img src="abc" /><img src="abc" /></body></html>';

$(source).filter('img').each(function () {
    $(this).attr('src', '123');
});

// At this point if I look at source in a debugger 
// I'd expect to see the src attributes as all being 
// '123', but I still see them all as 'abc'.

应该如何编写，以便源随更改而更新？

4

2 回答 2

2

这应该可以正常工作，但是您需要再次将 html 重新分配给字符串或附加到 DOM，因为更改在这里不会产生任何影响，因为选择器不是 DOM 元素而是字符串。

var source = '<html><head></head><body><img src="abc" /><img src="abc" /></body></html>';
     var $source = $(source);
     $source.filter('img').each(function () {
             $(this).attr('src', '123');
        });
    console.log($source.wrapAll($('<div/>')).parent().html()); 
    //or
    source = $source.wrapAll($('<div/>')).parent().html();

小提琴

或者只是做

 $(source).filter('img').attr('src', function () {
      return '123';
   }).appendTo('someselector');

演示

请注意，您可以attr像第二个示例中那样使用函数参数，而不是使用显式的 .each 。

于 2013-07-08T04:31:25.420 回答
2

Jquery 在幕后使用一组元素。在您的示例中，此数组看起来像['html']（在伪代码中），这意味着您只有一个元素（html）。当你使用过滤器时，它需要这个数组删除所有与你的选择器不匹配的元素。例如，如果您有一个这样的元素列表：['div', 'img', 'div', 'img']，使用您的原始代码

var only_images = $(source).filter('img');

将导致['img', 'img']删除所有'div'标签。话虽如此，由于您的示例只有一个元素['html']，因此结果最终是一个空数组[]。

find但是，该方法会搜索所有后代以查找匹配项。这意味着字符串中的每个元素都匹配img（原始父元素除外html）。

我不知道我已经很好地解释了它，但是您最终需要做的是切换代码并开始使用该find方法。下面的示例代码：

var source = '<html><head></head><body><img src="abc" /><img src="abc" /></body></html>';

$(source).find('img').each(function () {
    $(this).attr('src', '123');
});
于 2013-07-08T04:46:16.353 回答