Question

我想从带有Jquery的字符串中取出所有img元素，由于某种原因，下面的代码不输出更改的Img标记，有人可以帮我这个吗？

html='<p>lorem ipsum</p><p><img src="pic1.jpg" width="640" height="480" alt="pic1"></p><p>lorem ipsum</p><p><img src="pic2.jpg" width="25" height="25" alt="pic2"></p>';

$html = $(html);

$html.find("img").each(function() {
    $img = $(this,"img");

    if ($img.attr('width') > 25 && $img.attr('width') <= 640) {

        $a = $('<a class="example" title="'+ $img.attr('alt')+ '" alt="'+ $img.attr('alt') + '" href="'+ $img.attr('src') + '"></a>');

        $a.append($img.clone());
    }

    $img.replaceWith($a);
});

html = $html.html();

alert(html);

链接到jsFiddle：http://jsfiddle.net/cRx9w/

Answer 1

您以错误的方式使用$(selector, context)，而html方法仅返回第一个匹配元素的html内容，在这种情况下，第一个匹配元素是第一个创建的p元素<p>lorem ipsum</p>那就是为什么你实际上看不到$html变量包含的内容。

您可以使用filter和wrap方法。请注意，我创建了一个包装器元素，它是查看html内容的帮助器（您可能期望）。

var $html = $('<div/>').html(html);

$html.find("img").filter(function () {
    return this.getAttribute('width') > 25 && this.getAttribute('width') <= 640;
}).wrap(function () {
    return '<a class="test" title="' + this.getAttribute('alt') + '" alt="' + this.getAttribute('alt') + '" href="' + this.getAttribute('src') + '"></a>';
});

html = $html.html();

http://jsfiddle.net/rqYAH/

一些建议：

请使用console.log()，console.dir()，...进行调试 alert()。
使用var关键字声明变量。

错误显示从字符串更改IMG标记（Jquery）

1 个答案: