javascript - jQuery 集合的 HTML

Question

给定一些 HTML:

<span class="regular">Turkey</span>
<span class="removed">Ketchup</span>
<span class="added">Bacon</span>
<span class="added">Chicken</span>
<span class="added">Peanut Butter</span>
<span class="added">Mustard</span>

我只查询带有 .added 和 .removed 的类，如下所示:

$(".removed, .added")

如何获取这些选定元素的组合 HTML？
我试过了(笑)

$(".removed, .added").html()

这显然无法获取标记(它只提供第一个元素的 innerHTML)。有没有比使用 .each 更快的方法？作为一个类轮？

我想使用 span 中的现有类来创建输出。由于添加和删除的类分别使文本变成绿色和带有删除线的红色。在那种情况下，提取那些 DOM 元素并重用它们对我来说是有意义的。

Answer 1

一行:

var html_string = $('<div />').append($('.removed, .added').clone()).html();

我会编写一个 jQuery 插件并在外部文件中提供它，就像我提供任何第 3 方插件一样。然后你可以像你想要的那样把它作为一个更干净的“one liner”来做。

插件定义:

(function (global) {
    var $;

    if (global.jQuery) {
        $ = global.jQuery;

        $.fn.combinedHTML = function () {
            return $('<div />').append(this.clone()).html();
        };
    }
}(window));

插件使用:

var html_string = $('.removed, .added').combinedHTML();

一个 JS fiddle 使用每个:http://jsfiddle.net/2y7uG/1/

注意:您在文章末尾提到“提取那些 DOM 元素并重用它们对我来说 [原文如此] 很有意义”。请注意，获取某些内容的 HTML 并使用它不会从 DOM 中“拉出那些 DOM 元素”。因为您问的是获取 HTML，而这样的操作是在不操作 DOM 的情况下读取它，所以我在我的代码中使用了 .clone() 这样追加就不会改变原件。如果你真的想拿出原件，只需首先将你的收藏附加到你想要的地方，整个事情就会简单得多:

$('.removed, .added').appendTo('#placeIWantThem');

这将导致元素从它们当前在 DOM 中的位置被拉出，并放置在需要的位置。它也更简单、性能更高。