0

我有我无法控制的服务器端输出，只有前端 HTML 模板 - 我使用 JQuery 来操纵结果以进行布局。

我试图实现的概念是分离菜单项，以便某些项目可以出现在主导航的页面顶部或页面底部，因为它们在视觉上不太重要。

为了识别顶部菜单的项目，我使用了一个令牌（现在让我们说这是常量值： TOP ），我希望有一些 jquery 扫描每个节点并根据这个令牌隔离每个项目。因此，每个 TOP xxx 元素将收集以形成顶部菜单，而其他任何元素将收集以形成底部菜单。

这是我必须在下面处理的输出示例，我的目标是让菜单项 1 和 3 成为一个 html 结构，我可以将其传递到 id=TOPMENU 的 div 中，将 #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

您可以使用:contains() 选择器：

var topElements = $("#menusHolder .menuElement h3:contains('TOP')").parent();
var bottomElements = $("#menusHolder .menuElement").not(topElements);

小提琴：http: //jsfiddle.net/HRs8N/

于 2013-04-04T11:10:12.223 回答
0

解决这个问题的更好方法是使用一个类，因为这正是它们的用途，对事物进行分类。如果您可以灵活地将标记添加到 HTML，那么您也应该可以灵活地添加类。

在 HTML 元素中乱用文本往往会很混乱，例如，如果任何菜单项包含文本“TOP”，它可能会中断，而且获取这些元素也比简单地获取特定类的所有元素需要更多的工作。

jsFiddle

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