jquery - jQuery 可以返回 .wrap() 的完整结果，而不仅仅是原始的 $element 吗？

Question

我正在做一个.wrap()像这样(为了便于阅读而简化):

$p = $('<em>​sdf​</em>​');
$f = $('<span><p></p></span>');

$r = $p.wrap($f);

现在我正在尝试访问结果 <span><p><em>sdf</em></p></span>因为它有自己的 jQuery 对象。但是$r返回与 $p 相同的内容。显然就是这样。 wrap()有效:它返回包装的元素，但不返回其他内容。

我怎样才能吃到完整的辣酱 Jade 米饼馅？由于这是一个更复杂函数的一部分，我无法对包装树的深度做出假设。可以是 2 个元素或 6 个元素。

Answer 1

显而易见的答案是:

$r = $p.wrap($f).parent();

顺便说一句，您正在做一个错误的假设:p 不能包含另一个 p 元素。曾经。 DOM 一旦构造完成，就会将内部 p 元素移出预期的“父”元素。

如果您正在构建任意深度的内容，并且想要识别最顶层的元素，那么您当然可以使用:

$r = $p.wrap($f).parents().last();

虽然这假设被包装的元素此时不存在于 DOM 中，但如果它们存在，那么您可以使用带有 parents() 的选择器限制潜在的结果:

$r = $p.wrap($f).parents('parentClassName').last();

当然，您始终可以编写一个简单的 jQuery 插件，例如:

(function ($) {
    $.fn.altWrap = function (node) {
        var topmost = node[0];
        this.wrap(node);
        return topmost;
    };
})(jQuery);

这允许以下内容(看似)在我认为您所面临的限制下工作:

$p = $('<em>​sdf​</em>​');
$f = $('<div><div><span><p></p></span></div></div>');

$r = $p.altWrap($f);

console.log($p,$f,$r);

JS Fiddle demo .

通过一些(必要的)健全性检查更新了插件解决方案:

(function ($) {
    $.fn.altWrap = function (node) {
        var topmost, _tmp;
        if (node && node.length) {
            _tmp = node[0];
            while (_tmp.firstChild && _tmp.firstChild.nodeType == 1) {
                _tmp = _tmp.firstChild;
            }
            $(_tmp).append(this);
            topmost = node[0];
        }
        else {
            topmost = this;
        }
        return topmost;
    };
})(jQuery);

$p = $('<em>​sdf​</em>​');
$p2 = $('<em>some text</em>');
$f = $('<div><div><span><p></p></span></div></div>');

console.log($p2.altWrap($f));

JS Fiddle demo .

引用文献:

• append() .
• last() .
• parent() .
• parents() .
• wrap() .