jQuery "wrapAll“重复内容

Question

我对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-右项包装到一个elements--right div。

然后我有了这个函数(jq表示noConflict)，在文档(就绪)上调用了wich：

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>

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

Answer 1

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

谢谢Pranav的提醒。

Answer 2

它不会复制元素，但是它会选择所有具有相同类的元素，所以检查HTML中的元素副本，然后根据需要处理它。