使用 JQuery 将多组元素包装在一个 Div 中

Question

我正在处理下拉菜单，需要使用 JQuery 改变现有的 html 标记以使其适合设计。

这是一个简化的示例： 将所有包含多个“li”的“ul”包装在一个 div 中（在同一个 div 中，而不是每个 UL 一个 div）。

<ul>
    <li>foo</li>
</ul>
<ul>
    <li>foo</li>
    <li>foo</li>
</ul>
<ul>
    <li>foo</li>
    <li>foo</li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
my_selection = [];
i = 0;
// find all ul's that have more than one li
$("ul").each(function(){
    if($(this).find("li").length > 1){
        // add this to my_selection
        my_selection[i] = $(this);
        i++;
    } // if
}); // each

// wrap my_selection in div tags
$(my_selection).wrapAll(document.createElement("div"));
</script>

上面的代码给出了这个萤火虫错误：

“节点不能插入到层次结构中的指定点”代码：“3”

我怎样才能让它工作？

Answer 1

这些都是很好的答案。但我注意到您的脚本不在 $(document).ready(function(){...}) 内，而且您似乎验证了此错误仍然存​​在于未包含在 ready 函数中的其他代码。

我尝试发现 William 的代码有效（对他 +1），但由于我的强迫症，我对其进行了一些清理

$(document).ready(function(){
 my_selection = [];
 $('ul').each(function(i){
  if ($(this).find('li').length > 1 ){
   my_selection.push(['ul:eq(' + i + ')']);
  }
 });
 $( my_selection.join(',')).wrapAll('<div class="wrapper"></div>');
})

Answer 2

这有点小题大做。

<script>
jQuery( function() {
    my_selection = [];

    i = 0;
    n = 0;
    jQuery( 'ul' ).each( function() {
        var ul = jQuery( this );
        if ( ul.children().length > 1 ) {
            my_selection[n++] = 'ul:eq(' + i + ')';
        }
        ++i;
    } );

    jQuery( my_selection.join( ',' ) ).wrapAll( document.createElement( 'div' ) );
} );
</script>

Answer 3

当我回答这个问题时，我有点忙，抱歉所有问题。以下内容正确解决了问题。

<script type="text/javascript">
jQuery( function() {
    jQuery( 'ul' ).find( 'li:eq(1)' ).parent().wrapAll( '<div></div>' );
} );
</script>

编辑：我将 li:gt(0) 更改为 li:eq(1)，它们都有效，但一个更有效感觉。

很简单，它遍历所有 ul 和他们的孩子，它试图抓住第二个孩子。如果找到第二个孩子，则返回其父级以将其添加到 wrapAll 方法。

编辑：看起来如果您将帖子编辑超过 8 次，它就会变成社区 Wiki，很有趣。

Answer 4

这将是一种更清洁的方法：

$('ul:has(li)').wrap('<div></div>');

首先，您不需要创建节点，只需将包装字符串提供给 jQuery。 其次，在此实例中使用 :has 选择器来减少示例中的 each 功能。 最后，（这取决于您的预期功能）您可能希望使用wrap 而不是wrapAll。

编辑： 另一种选择是从另一种方式接近它。获取<li> 标签然后获取<ul> 父级：

$('li:not(:only-child)').parent().filter('ul').wrap('<div></div>');

Answer 5

你的代码中有一个错误，试图用 DIV 包装你的 LI。

<script>
my_selection = [];
i = 0;
// find all ul's that have more than one li
$("ul").each(function() {
    var $ul = $(this);
    if ($ul.find("li").length > 1){
        // add this to my_selection
        my_selection[i] = $ul;
        i++;
    } // if
});

// wrap my_selection in div tags
$(my_selection).wrap(document.createElement("div"));
</script>

Answer 6

我不确定 jQuery 是否可以将数组作为选择器。在$(my_selection) 中，my_selection 不是一个 jQuery 对象，而是一个对象数组。您可以首先尝试生成 jQuery 对象，使用 var my_selection = $(''); ... my_selection.add($(this));。

另外，使用.wrapAll() 方法，您可以只使用：.wrapAll('<div></div>');。