如何连接非空的断开连接的节点? [英] How do I concatenate non-empty, disconnected nodes?

问题描述

当我尝试使用.after建立一系列断开连接的DOM节点时，如果它们为空，则可以正常工作:

When I try to build up a sequence of disconnected DOM nodes using .after, it works fine if they are empty:

[14:56:45.186] $('<span></span>').after('<p></p>');
[14:56:45.193] ({0:({}), length:2, prevObject:{0:({}), length:1}, context:(void 0), selector:".after([object Arguments])", 1:({})})

但是，如果我尝试在第一个节点中添加任何文本，则会失败:

But if I try to add any text in the first node, it fails:

[14:56:41.521] $('<span>test</span>').after('<p></p>');
[14:56:41.525] ({0:({}), length:1})

如果我将结果分配给变量并尝试检查它，则好像从未调用过after.

If I assign that result to a variable and try to inspect it, it appears as if after had never been called at all.

这是怎么回事，我该如何解决?

What's going on here, and how do I work around it?

对于那些感兴趣的人，我最终写了以下包装，这些包装似乎使我的生活更加轻松:

For those interested, I ended up writing the following wrappers which seem to be making life much easier for me:

function tag(name) {
    return function(contents, options) {
        var o = options || {};
        var is_array = $.type(contents) === "array";
        if (!is_array) {
            o.text = contents;
        }
        result = $('<' + name + ' />', o);
        if (is_array) {
            $.each(contents, function(i, child) { result.append(child); });
        }
        return result;
    }
}
var span = tag('span');
var div = tag('div');

推荐答案

要弄清您的错误-当我在JavaScript控制台中运行您的代码时，会得到以下信息:

To clarify your bug -- when I run your code in my JavaScript console, I get the following:

> $('<span></span>').after('<p></p>');
[<span>​</span>​,<p>​</p>]
> $('<span>test</span>').after('<p></p>');
[<span>​test​</span>​]

根据 jQuery 1.9升级指南:

1.9之前的版本，.after()、. before()和.replaceWith()会尝试 如果当前jQuery集合中的第一个节点，则添加或更改该节点 集未连接到文档，在这种情况下返回新的 jQuery集而不是原始集. 这创建了几个 不一致和彻底的错误-该方法可能会或可能不会 会根据其参数返回新结果！ 从1.9开始，这些 方法始终返回原始的未修改集，并尝试执行以下操作: 在没有父节点的节点上使用.after()、. before()或.replaceWith() 没有作用-也就是说，集合或其中包含的节点都不是 改变了.

Prior to 1.9, .after(), .before(), and .replaceWith() would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. This created several inconsistencies and outright bugs--the method might or might not return a new result depending on its arguments! As of 1.9, these methods always return the original unmodified set and attempting to use .after(), .before(), or .replaceWith() on a node without a parent has no effect--that is, neither the set or the nodes it contains are changed.

因此:您观察到的行为是一个错误，该错误是由于在没有父级的节点上使用.after()导致的.从1.9开始，jQuery开发团队已通过完全消除此不一致性的方式解决了这种不一致性-使用.after()的这种方式应始终返回不带<p>的初始节点(

So: The behavior you've observed is a bug which results from using .after() on a node without a parent. As of 1.9, the jQuery dev team has solved this inconsistency by removing it entirely -- using .after() this way should always return the initial node without the <p> after it (fiddle).

解决方法:

将您的DOM节点推送到一个简单的数组上.或将它们附加到父节点，然后获得所有子节点:( fiddle )

Push your DOM nodes onto a simple array. Or append them to a parent node, then get all the children: (fiddle)

$chain = $('<div>').append('<span></span>').append('<p>qwer</p>').children();

这篇关于如何连接非空的断开连接的节点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！