Question

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

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

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

下面是我必须处理的输出示例，我的目标是将菜单项1和3变为html结构，我可以将其传递给id为= TOPMENU且＃2的div放入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>

Answer 1

您可以使用:contains() selector：

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

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

Answer 2

更好的方法是使用一个类，因为它正是他们所做的，对事物进行分类。如果您可以灵活地向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)
    });
});

只有包含关键字时，JQuery才会返回DIV及其内容

2 个答案: