使用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

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

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

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

编辑：
另一种选择是从相反的方向来处理它。获取

标签，然后获取

父级：

$('li:not(:only-child)').parent().filter('ul').wrap('<div></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

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

另外，使用 .wrapAll() 方法，您可以只使用：.wrapAll('

');。

Answer 4

您的代码中有一个错误，试图用 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 5

回答这个问题的时候有点忙，抱歉给大家带来了一些问题。下面正确解决了这个问题。

<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 6

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

我尝试并发现 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>');
})