我正在做一个.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 个元素。
最佳答案
显而易见的答案是:
$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);
通过一些(必要的)健全性检查更新了插件解决方案:
(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));
引用文献:
关于jquery - jQuery 可以返回 .wrap() 的完整结果,而不仅仅是原始的 $element 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17846031/