如何在jQuery中将两个标记合并在一起？

Question

我相信这是个棘手的问题。我想合并两个标签在一起。举个例子，这两个ID不同的<span>就在一起，如下所示：

Lorem ipsum <span id="selected-1">dolor sit</span><span id="selected-2" title="important info here"> amet, consectetur</span> adipiscing elit.

最后，我希望将selected-1、selected-2和合并，保留属性 of selected-2，最后提供如下内容：

Lorem ipsum <span id="selected-2" title="important info here">dolor sit amet, consectetur</span> adipiscing elit.

有小费吗？我真的搞不懂这个。

谢谢。

Answer 1

这是我的1行版本：

$('#selected-2').html( $('#selected-1').html() + $('#selected-2').html() ).prev().remove();

...and甚至是一个更短的版本。

$('#selected-2').prepend($('#selected-1').html()).prev().remove();

更短的版本=下载的代码更少(特别是对于移动浏览器)。

编辑：，因为我的短短的单行答案陷入了圈套，并且正在使用这个页面上最长的标记答案的头对头，所以并不总是关于基准速度的重要内容，而是简单的功能和代码维护。

此外，每秒的计算并不等同于真实世界和真实浏览器页面呈现，这将揭示最终没有真正的性能改善。

IMHO，在现实世界中使用一行标记，使得更实用、更普通的相对于容易出现用户创建错误(点每i和交叉每t)的代码，后者也会创建更多的数据( .js文件)以供下载和解析。

Answer 2

三行应该这样做：

$("#selected-1").html($("#selected-1").html() + $("#selected-2").html());
$("#selected-1").attr("title", $("#selected-2").attr("title"));
$("#selected-2").remove()

Answer 3

希望这是最简单的方法(严格按照示例进行)：

var s1 = $('#selected-1').html();
$('#selected-1').remove();
$('#selected-2').prepend(s1);

您可以在http://jsfiddle.net/KFXRe/验证这一点。