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以及保持selected-2的属性最终会带来类似的内容：

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

任何提示？我真的想不通这个。

感谢。

Answer 1

三行应该这样做：

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

Answer 2

希望这是最简单的方法（严格按照例子）：

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

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

Answer 3

这是我的1行版本：

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

......甚至更短的版本。

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

版本较短=下载的代码较少（特别是对于移动浏览器）。

修改：由于我的简短的单行答案已经陷入困境，并且在此页面上以head-to-head获得了最长的标记答案，它是<强大>并不总是关于基准速度这很重要，但只是功能和代码维护。

此外，每秒计算次数并不等同于真实世界和实际浏览器页面呈现，这将最终显示没有真正的性能提升。< / p>

恕我直言，真实世界的标记使用一行使得更加实用和常识的与代码的巨人容易产生用户创建的错误（每隔一个点，每隔一个点交叉），这也是创建更多数据（.js文件）进行下载和解析。

Answer 4

这里真的没有必要使用jQuery，它必须完成对DOM节点进行字符串化的所有工作，然后重新解析它们以将它们放回DOM中。

var span1=document.getElementById("selected-1"), 
    span2=document.getElementById("selected-2"),
    insert=span2.firstChild,
    elt;

while (elt=span1.lastChild) {
  insert=span2.insertBefore(elt,insert); // removes the node from span1
}

span1.parentNode.removeChild(span1);

OP确实询问了jQuery解决方案。但如果有人问如何用瑞士军刀砸钉子，建议使用锤子似乎是合理的，特别是如果他们已经有锤子，应该知道如何使用它，使用它会快100倍。

我知道大多数应用程序都使用jQuery，因此加载它没有增加的成本。在许多情况下确实提供了令人满意的简洁性 - 当你将所有东西都放在一条线上时，很少有催产素。但也有成本。性能成本可能高达两个数量级，然后将程序员隐藏起来的成本就会降低。

在这种情况下，如果OP知道了大约四个基本的DOM API，他可能已经想出自己如何编写简单的单行同时循环将元素从一个地方移动到另一个地方，而不是试图计算将jQuery咒语的神奇序列连接在一起以实现这一目标，陷入困境，并不得不发布到SO。

考虑http://jsperf.com/combine-dom-nodes处的性能比较，这表明jQuery解决方案慢了100倍。

另一方面，即使是Brendan Eich似乎也会转向jQuery链接的单行范式，给出了以下示例：

$(document).getTDs().getEven().hover().css("yellow").addCustomEvent("setSelected").setSelected(this.currentMagicNode).get.out("white").getTDs().getOdd().hover().css("yellow").addCustomEvent("setSelected").setSelected(this.currentMagicNode).out("white");

并评论道，“事后我可以看到为什么JavaScript从未流行”，Brendan说。 “所有这些分号和换行符使得代码非常难以阅读。而且你水平阅读代码而不是垂直代码 - DUHHHH！JavaScript没有赢！”请参阅http://clubajax.org/brendan-eich-redesigns-javascript-to-look-like-jquery/#more-1491。

Answer 5

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

基本上，我单独获得元素。然后我在第二个元素中插入第一个元素的html和第二个元素中当前的html（或者它将被覆盖）。最后，但并非最不重要的是，我删除了第一个元素。

- ＆GT;＆GT;＆GT;＆GT;＆GT;＆GT;＆GT; jsFiddle＆lt;＆lt;＆lt;＆lt;＆lt;＆lt; -

Answer 6

我没有测试你所有的解决方案，但我带了这段代码：

var $wrapper = $( "#selected-1, #selected-2" )
    .wrapAll( "<span title='" + $( "#selected-2" ).attr( "title" ) + "'></span>" )
    .parent();

$( "#selected-1, #selected-2" ).replaceWith(function() {
    return $( this ).html();
});

$wrapper.attr( "id", "selected-2" );

我不知道我的方式是否更快但是......

如何在jQuery中合并两个标签？

6 个答案: