jquery - 仅当项目尚未在某个元素内时才包装项目

Question

jquery dom jquery-selectors 简单的问题，但我无法确定。我正在通过操作一个简单的列表元素。

我的菜单结构如下所示：

<ul>
    <li>
        <a href="#">Something</a>
        <ul>
            <li>
                <a href="#">Some Sub Menu Item</a>
            </li>
        </ul>
    </li>
</ul>

悬停时我有一个简单的规则：找到所有二级 <li>元素并将它们包装在一个带有类的.subMenuContainer

因此，在悬停时，上述内容转换为：

<ul>
    <li>
        <a href="#">Something</a>
        <ul>
            <div class="subMenuContainer">
                <li>
                    <a href="#">Some Sub Menu Item</a>
                </li>
            </div>
        </ul>
    </li>
</ul>

简而言之，子菜单项被包裹在一个 div 中，因此它们可以被专门定位。

这在第一次悬停时效果很好，但在第二次悬停时 subMenuContainer 再次被包裹，所以对于“X”个悬停我最终得到了“X”个 subMenuContainer 元素。

我包装这些的 jQuery 规则

要素如下：

$('ul.someClass li').bind('mouseover', function(){
    $(this).find('ul').not(':contains(div.subMenuContainer)').find('li').wrapAll('<div class="subMenuContainer" />');
});

当然，通过使用上面的代码，如果在 ?

我错过了什么吗？

问候，西蒙

[编辑] - 请参阅下面选择的答案，解决方案只是在搜索元素时使用>$('ul > li') ，例如：这只会导致找到（而不是在 div 中）<li>的直接子项的项目。<ul>谢谢你。

Answer 1

发生这种情况是因为 :contains 用于文本，而不是元素。试试这个：

$(this).find('ul > li').wrapAll('<div class="subMenuContainer" />');

或者

$(this).find('ul').children('li').wrapAll('<div class="subMenuContainer" />');

现在只有 li 是 ul 的直接子代。

Answer 2

尝试使用.one()代替hover()or bind()。

$('ul.someClass li').one('mouseover', function(){
    $(this).find('ul').find('li').wrapAll('<div class="subMenuContainer" />');
});