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 - right 项目包装到元素 - 右边 div。

然后我在文档（就绪）上调用了这个函数（ jq 用于noConflict）：

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 - 右包装元素。

谢谢Pranav的抬头。

Answer 2

它不会复制元素，但会选择具有相同类的所有元素，因此请检查HTML以查找元素的副本并根据需要进行处理。

jQuery＆＃34; wrapAll＆＃34;重复的内容

2 个答案: