Question

我想覆盖具有相同类名的几个链接的outerHTML。我只是想知道这是否无效，因为jQuery不支持.outerHTML。如果有，你可以参考吗？还有，有办法让这项工作：

$('.t').each(function() {
    $('.t').outerHTML = '<a href="http://www.google.com">' + 
        '<img src="' + $('.t').attr('src') + '" class="' + $('.t').attr('class') + '" /></a>';
});

Answer 1

正如Felix Kling在评论中提到的，看起来你只是试图在每个<a>周围包裹一个.t元素。 jQuery已经有了这样做的方法：

$('.t').wrap('<a href="http://google.com">');

如果你认为你真的需要设置一个元素的outerHTML，你可能想尝试使用我昨天写的answer to another question代码片段。它模仿.html()的行为，但允许您获取或设置outerHTML()。

Answer 2

您可以在每个人中使用this！

this.outerHTML

要跨浏览器使用这个jQuery插件：

https://github.com/darlesson/jquery-outerhtml

Answer 3

jQuery提供了你想要的东西，而不是一个完整的'outerHTML'功能：

$('.t').each( function() {
    // Modify the html directly
    $(this).html('<img src="' + $('.t').attr('src') + '" class="' + $('.t').attr('class') + '" /></a>');
    // Use attr to change href
    $(this).attr('href','http://www.google.com');
});

你也可以.append（）一个新的$（'＆lt; img /＆gt;'）你用.attr（）和.addClass（）操作，而不是写出html字符串。

Answer 4

创建简单的outerHTML jQuery插件：

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);


// usage
$("<p>Hello</p>").outerHTML(); //  "<p>Hello</p>"

Answer 5

一个新的jQuery outerHTML插件版本在https://github.com/darlesson/jquery-outerhtml发布，它似乎可以做你想要的：

    $(".t").each(function(){

        var $this = $(this),
            // Get the attribute values
            src = $this.attr("src"),
            className = $this.attr("class");

        $this.outerHTML("<a href='http://www.google.com'><img src='" + src + "' class='" + className + "' />");

    });

是否有针对outerHTML的jQuery插件？

5 个答案: