2017-06-15 8 views
0

wrapAll jQuery関数に問題があります。 私はWordpressのテーマを作成しています。デスクトップ上でメニュー要素がモバイル上よりも少し異なる必要があります。短い話をすると、いくつかのメニュー項目をdivにラップする必要があります。 (jQuery "wrapAll"重複コンテンツ

<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> 

ワウ、私はクラスを追加しました:だからここ

は、HTMLコードは、私はjQueryの関数を呼び出す前に(私が自発的に質問を簡素化するために、上の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> 

を、誰もが何が起こっているかについての手掛かりを持っている場合は、私は非常に感謝されるでしょう。 ありがとうございます!

+0

他のどこかで同じコードがあると思います。 –

+0

'jq( '.eel - right')のチェック値。length' –

+0

あなたが示唆したように" el - right "要素の数を確認し、いくつかの理由でビンゴをフッターに隠していました。以前はそれをチェックしていないのは本当に本当に恥ずかしい気がする。 どうもありがとうございました! –

答えて

0

同じ「エル - 権利」を持ついくつかのコードクラスは、メニューにそれを「つかむ」と他のエルに包まれ、その結果、フッターに隠れていた - 右要素。

ヘッドアップのためのプラナフありがとうございます。

0

要素は重複しませんが、同じクラスのすべての要素が選択されるため、HTMLの要素の重複をチェックして必要に応じて処理します。

関連する問題