1

我想从带有 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/

4

1 回答 1

0

您$(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关键字声明变量。
于 2013-07-05T21:11:36.777 回答