Javascript jQuery集合的HTML

给定一些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>

如何获得这些选定元素的组合HTML
我试过（只是为了好玩）

这显然不适用于获取标记（它只提供第一个元素的innerHTML）。是否有比使用

更快的方法。每个
？作为一个班轮

我想使用span中现有的类来创建输出。因为添加和删除的类分别使文本变为绿色和带删除线的红色。在这种情况下，我有必要提取这些DOM元素并重用它们
 想到的一个方法是：
方法#1

function doSomething(){
    if ($(this).hasClass('clickedTag')){
        // code here
    }

    else {
         // and here
    }
}

$('.tag1').click(doSomething);
$('.tag2').click(doSomething);

方法#2

这也将有助于：

​$(".class1, .class2").click(function(){
   alert("clicked");    
});​

小提琴：

如果选择器很简单，这很好，但如果有可能重用逻辑，我更喜欢使用单独的函数（方法#1）

您还可以查看：jQuery multiple class selector，用于处理同一项上的多个类。
想到的一种方法是：
方法#1

function doSomething(){
    if ($(this).hasClass('clickedTag')){
        // code here
    }

    else {
         // and here
    }
}

$('.tag1').click(doSomething);
$('.tag2').click(doSomething);

方法#2

这也将有助于：

​$(".class1, .class2").click(function(){
   alert("clicked");    
});​

小提琴：

如果选择器很简单，这很好，但如果有可能重用逻辑，我更喜欢使用单独的函数（方法#1）

您还可以查看：jQuery multiple class selector，用于处理同一项上的多个类。

var x = "";
$('.removed, .added').each(function () {
    x += this.outerHTML;
});
alert(x)


var x = "";
$('.removed, .added').each(function () {
    x += this.outerHTML;
});
alert(x)

一些混合元素的连接html可能遍布整个DOM，这毫无意义

但是，文本确实存在，
$（“.removed，.added”）。text（）
应该可以工作


更新：因为你已经用你真正想要达到的目标更新了问题，你可以这样做：

$(".removed, .added").clone().appendTo($('.newPlaceToReuse'))

一些混合元素的连接html可能遍布整个DOM，这毫无意义

但是，文本确实存在，
$（“.removed，.added”）。text（）
应该可以工作


更新：因为你已经用你真正想要达到的目标更新了问题，你可以这样做：

$(".removed, .added").clone().appendTo($('.newPlaceToReuse'))

一行：

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

使用以下各项的JS小提琴：

请注意：您在文章末尾提到“对我来说，提取那些DOM元素并重用它们是有意义的”。请注意，获取某个内容的HTML并使用它并不会“将那些DOM元素”从DOM中拉出。因为您要求获取HTML，而这样的操作是在不操纵DOM的情况下读取DOM，所以我在代码中使用了
.clone（）
，这样追加就不会更改原始内容。如果你真的想拿出原作，只需在你想要的地方添加你的收藏，整个过程就会简单得多：

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

这将导致从DOM中当前所在的位置提取元素，并将其放置在所需的位置。它更简单，性能也更高。
一行程序：

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

使用以下各项的JS小提琴：

请注意：您在文章末尾提到“对我来说，提取那些DOM元素并重用它们是有意义的”。请注意，获取某个内容的HTML并使用它并不会“将那些DOM元素”从DOM中拉出。因为您要求获取HTML，而这样的操作是在不操纵DOM的情况下读取DOM，所以我在代码中使用了
.clone（）
，这样追加就不会更改原始内容。如果你真的想拿出原作，只需在你想要的地方添加你的收藏，整个过程就会简单得多：

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

这将导致从DOM中当前所在的位置提取元素，并将其放置在所需的位置。它更简单，代码性能也更高。
预期的输出是什么？我想使用
span
s中的现有类来创建输出。由于添加和删除的类创建了一个带删除线的绿色和红色文本。“这显然有效。”那么有什么问题吗？@FelixKling我怀疑这是一个打字错误，因为这行显然无法生成OP所要求的内容。那么，您是否希望每个类中的所有HTML都包含一个简单的字符串，例如
“番茄酱培根鸡”
或每个元素的对象数组（整个元素包括周围的span），例如
[span.removed，span.added，span.added]
？预期的输出是什么？我想使用
span
s中的现有类来创建输出。因为添加和删除的类创建了删除线，所以文本会变成绿色和红色。“这显然是可行的。”。“那么问题出在哪里呢？@FelixKling我怀疑这是一个输入错误，因为这行显然无法生成OP所要求的内容。那么，您是否希望这些类中的每个类都包含一个简单的HTML字符串，例如
“Ketchup Bacon Chicken”
，或者每个元素（整个元素包括周围的跨度）都包含一个对象数组例如，
[span.删除，span.添加，span.添加]
？这根本不能回答问题。OP试图获取这两个类中每个类的HTML。这根本没有回答这个问题。OP正在尝试获取两个类中每个类的HTML。这不是一行，但可能是OP想要做的唯一方法。问题是如何将其放在一行中。@Gotschi您删除间距^^@Gotschi我是开玩笑的。这不是一行，但可能是OP想要做的唯一方法。问题是如何将其放在一行中行。@Gotschi您删除了空格^^@Gotschi我是在开玩笑，但这会给出“番茄酱鸡肉花生奶油芥末”。OP想要html.OP只是在探索jQueryAPI时玩得很开心。我试图解释为什么html（）不能像预期的那样工作，但这会产生“番茄酱花生酱”。OP想要html.OP只是在探索jQueryAPI时玩得很开心。我试图解释为什么html（）没有按预期工作。在我的情况下，拉跨（移动跨）和克隆spa都无关紧要