0

我对wrapAll jQuery 函数有疑问。我正在创建一个 Wordpress 主题，我需要桌面上的菜单元素与移动设备上的菜单元素略有不同。长话短说，我需要将一些菜单项包装到一个 div 中。

所以这里是涉及的 HTML 代码，在我调用我的 jQuery 函数之前（我自愿不包括上 ul 和 li 父母以简化问题）：

<li id="menu-item-124" class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://foo.bar">Arbitrage</a></li>
<li id="menu-item-132" class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="http://foo.bar">Enseignement</a></li>
<li id="menu-item-82" class="sub__cat last__right el--right no-href menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-82"><a href="#">Multimédia</a>
    <ul  class="sub-menu">
        <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://foo.bar">Photos &#038; vidéos</a></li>
        <li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://foo.bar">Téléchargements</a></li>
    </ul>
</li>

哇，我所做的是为我想要包装的每个菜单项添加一个类（ el--right ）。我检查elements__right div 是否存在以避免多次创建它，然后我将所有el--right项目包装到elements--right div。

然后我有这个函数（jq用于 noConflict），它在 document(ready) 上被调用：

function desktopMenu() {

    if ( jq(window).width() > 1365 ) {

        if ( jq('.elements__right').length > 0 ) {

        } else {

            jq('.el--right').wrapAll('<div class="elements__right"> </div>');

        }
 }

所以我想要的结果如下：

<div class="elements__right"> 
    <li id="menu-item-124" class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://foo.bar">Arbitrage</a></li>
    <li id="menu-item-132" class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="http://foo.bar">Enseignement</a></li>
    <li id="menu-item-82" class="sub__cat last__right el--right no-href menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-82"><a href="#">Multimédia</a>
        <ul  class="sub-menu">
            <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://foo.bar">Photos &#038; vidéos</a></li>
            <li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://foo.bar">Téléchargements</a></li>
        </ul>
    </li>
</div>

但是内容是重复的。奇怪的是，它在没有菜单项 ID 的情况下重复：

<div class="elements__right"> 
    <li id="menu-item-124" class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://foo.bar">Arbitrage</a></li>
    <li id="menu-item-132" class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="http://foo.bar">Enseignement</a></li>
    <li id="menu-item-82" class="sub__cat last__right el--right no-href menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-82"><a href="#">Multimédia</a>
        <ul  class="sub-menu">
            <li id="menu-item-135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://foo.bar">Photos &#038; vidéos</a></li>
            <li id="menu-item-136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://foo.bar">Téléchargements</a></li>
        </ul>
    </li>
    <li class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://foo.bar">Arbitrage</a></li>
    <li class="sub__cat standalone el--right menu-item menu-item-type-post_type menu-item-object-page menu-item-132"><a href="http://foo.bar">Enseignement</a></li>
    <li class="sub__cat last__right el--right no-href menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-82"><a href="#">Multimédia</a>
        <ul  class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-135"><a href="http://foo.bar">Photos &#038; vidéos</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136"><a href="http://foo.bar">Téléchargements</a></li>
        </ul>
    </li>
</div>

如果有人知道发生了什么，我将不胜感激。非常感谢 ！

4

2 回答 2

0

它不会重复元素，但会选择具有相同类的所有元素，因此请检查您的 HTML 中是否存在重复的元素并根据需要进行处理。

于 2017-06-15T15:49:53.447 回答
0

一些具有相同“el--right”类的代码隐藏在页脚中，导致将其“抓取”到菜单并被其他el--right元素包裹。

感谢 Pranav 的提醒。

于 2017-06-15T15:49:01.807 回答