0

フロントHTMLテンプレートのみを制御できないサーバー側の出力があります-JQueryを使用してレイアウト目的で結果を操作しています。

私が達成しようとしている概念は、いくつかのアイテムがメイン ナビゲーションのページの上部またはページの下部に表示されるように、メニュー アイテムを分離することです。

トップ メニューの項目を識別するために、トークンを使用しています (今のところ、これは定数値であるとしましょう: TOP )。jquery で各ノードをスキャンし、このトークンに応じて各項目を分離することを望んでいました。したがって、各 TOP xxx 要素が集まってトップ メニューを形成し、その他の要素が集まってボトム メニューを形成します。

以下に対処する必要がある出力の例を示します。私の目標は、メニュー項目 1 と 3 を id=TOPMENU で div に渡すことができる html 構造にし、#2 を div id=BOTTOMMENU にドロップすることです。

注意: H3 と外側の menuElement div 構造を保持したいと考えています。

あなたの助けとアドバイスをありがとう。

お役に立てれば幸いです。

<div id="menusHolder">
  <div class="menuElement">
     <h3>TOP Menu Title 1</h3>
     <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
  </div>
  <div class="menuElement">
     <h3>Menu Title 2</h3>
     <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
  </div>
  <div class="menuElement">
     <h3>TOP Menu Title 3</h3>
     <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
  </div>
</div>
4

2 に答える 2

0

これを行うためのより良い方法は、クラスを使用して、物事を分類することです。HTML にトークンを追加できる柔軟性がある場合は、クラスも追加できる柔軟性が必要です。

HTML 要素内のテキストをいじるのは厄介な傾向があります。たとえば、メニュー項目に「TOP」というテキストが含まれていると壊れる可能性があり、特定のクラスのすべての要素を単に取得するよりも、これらの要素を取得する方が手間がかかります。

jsフィドル

HTML

<div id="menusHolder">
  <div class="menuElement top">
     <h3>Menu Title 1</h3>
     <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
  </div>
  <div class="menuElement">
     <h3>Menu Title 2</h3>
     <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
  </div>
  <div class="menuElement top">
     <h3>Menu Title 3</h3>
     <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
     </ul>
  </div>
</div>

JS

$(document).ready(function () {
    $('.top').each(function () {
        // Do something with $(this)
    });
});
于 2013-04-04T11:10:48.520 に答える