Question

我正在做.wrap()之类的（为了便于阅读而简化）：

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

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

现在我正在尝试访问结果sdf，因为它是自己的jQuery对象。但$r返回与$p相同的内容。显然，这就是。wrap()的工作原理：它返回包装的元素，但没有别的。

如何获得完整的辣酱玉米饼馅？由于这是一个更复杂的函数的一部分，我不能对我的包装树的深度做出假设。可以是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

参考文献：

Answer 2

是的，wrap再次返回对象本身以提供像$p.wrap(...).animate(...).remove();这样的函数链等等。

由于您将$p打包成p到span，您可以通过$r = $p.wrap($f).parent().parent();

获取“完整的辣酱玉米饼”

可以jQuery返回.wrap（）的完整结果，而不仅仅是原始的$元素？

2 个答案: