3

我正在这样做.wrap()（为便于阅读而简化）：

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

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

现在我正在尝试访问结果<span><p><em>sdf</em></p></span>，因为它是自己的 jQuery 对象。但$r返回与$p. 显然是这样的。wrap()工作：它返回包装的元素，但没有别的。

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

4

2 回答 2

4

显而易见的答案是：

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

顺便说一句，您正在做一个错误的假设： ap不能包含另一个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​&lt;/em>​');
$f = $('<div><div><span><p></p></span></div></div>');

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

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

JS 小提琴演示。

通过一些（必要的）完整性检查更新了插件解决方案：

(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​&lt;/em>​');
$p2 = $('<em>some text</em>');
$f = $('<div><div><span><p></p></span></div></div>');

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

JS 小提琴演示。

参考：

于 2013-07-24T22:44:13.337 回答
1

是wrap的，再次返回对象本身以提供函数链接之类$p.wrap(...).animate(...).remove();的。

由于您将您的包装$p成一个p，span您可以通过以下方式获得“完整的辣酱玉米饼馅”$r = $p.wrap($f).parent().parent();

于 2013-07-24T22:44:31.657 回答