jQuery“add”仅在调用“appendTo”时评估答案

【问题标题】：jQuery "add" Only Evaluated When "appendTo" CalledjQuery“add”仅在调用“appendTo”时评估
【发布时间】：2014-12-19 17:03:21
【问题描述】：

从昨天下午开始，这一直让我发疯。我正在尝试使用 jQuery 的“添加”方法连接两个选定的 HTML 正文。我显然错过了一些基本的东西。下面是一些说明问题的示例代码：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p id="para1">This is a test.</p>
    <p id="para2">This is also a test.</p>

    <script>
        var para1 = $("#para1").clone();
        var para2 = $("#para2").clone();

        var para3 = para1.add(para2);

        alert("Joined para: " + para3.html());

        para3.appendTo('body');

    </script>
    </body>
</html>

我需要在追加之前对“para3”进行更多操作，但上面的警报只显示“para1”的内容。但是，“appendTo”附加了 para1 和 para2 的正确“添加”内容（随后出现在页面上）。

有什么想法吗？

【问题讨论】：

阅读$.add（和$.html）文档。 $para3 是两个元素的 jQuery 选择器。

标签： javascript jquery text concatenation add

【解决方案1】：

根据$.add，

创建一个新的 jQuery 对象，将元素添加到匹配的元素集合中。

因此，在add 之后，$para3 表示两个元素的 jQuery 结果集 ~> [$para1, $para2]。然后，根据$.html，

获取匹配元素集合中第一个元素的HTML内容，或者设置每个匹配元素的HTML内容。

所以返回 jQuery 结果 ($para1) 中 first 项的 HTML 内容，并忽略后续元素（包括 $para2）。这种行为在 jQuery“值读取”函数中是一致的。

阅读$.appendTo 将解释它与$.html 的工作方式有何不同。

一个简单的map和array-concat可以用来获取“结果集中所有项目”的HTML：

$.map($para3, function (e) { return $(e).html() }).join("")

Array.prototype.map.call($para3, function (e) { return $(e).html() }).join("")

或者在这种情况下，只是：

$para1.html() + $para2.html()

另一种方法是在添加子元素后获取父元素的内部 HTML。

【讨论】：