0

我正在处理一个下拉菜单，需要使用 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”

我怎样才能让它工作？

4

6 回答 6

4

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

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

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

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

$('li:not(:only-child)').parent().filter('ul').wrap('<div></div>');
于 2009-12-07T19:32:23.207 回答
1

这有点骇人听闻。

<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>
于 2009-12-07T21:31:53.590 回答
0

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

我尝试并发现威廉的代码有效（对他+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>');
})
于 2009-12-07T22:38:07.260 回答
0

您的代码中有一个错误，试图用 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>
于 2009-12-07T18:59:02.970 回答
0

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

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

于 2009-12-07T19:01:50.843 回答
0

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

<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，很有趣。

于 2009-12-07T19:04:53.513 回答