Question

自昨天下午以来，这一直让我发疯。我试图使用jQuery＆＃34;添加＆＃34;来连接选定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>

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

任何想法在这里发生了什么？

Answer 1

根据$.add，

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

因此，在add之后，$ para3表示两个元素的jQuery结果集〜＆gt; [$ para1，$ para2]。然后，按$.html，

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

因此返回jQuery结果（$ para1）中 first 项的HTML内容，并忽略后续元素（包括$ para2）。这种行为在jQuery＆＃34;值读取＆＃34;中是一致的。功能

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

可以使用简单的map和array-concat来获取＆＃34;结果集中所有项目的HTML＆＃34;：

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

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

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

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

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

jQuery＆＃34;添加＆＃34;仅评估当＆＃34; appendTo＆＃34;叫

1 个答案: