1

好的，伙计们。我想要做的是创建一个无序列表（ul），其中包含嵌套（ul）。我正在尝试修改主要（ul）元素中的类，但我不知道如何做到这一点。让我给你举个例子。假设我有这个：

<ul id="mainNav">
<li><a href="#">Main Item 1</a></li>
<li><a href="#">Main Item 2</a>
   <ul>
    <li><a href="#">subitem1</a></li>
    <li><a href="#">subitem2</a></li>
   </ul>
</li>
<li><a href="#">Main Item 3</a></li>
<li><a href="#">Main Item 4</a>
   <ul>
    <li><a href="#">subitem3</a></li>
    <li><a href="#">subitem4</a></li>
   </ul>
</li>
</ul>

我想要做的是在“mainNav”中找到嵌套的（ul），并使用 jquery 为它们应用一个类。此外，我需要将类和其他属性应用于嵌套（ul）的父（li）。我希望这是有道理的。输出看起来像这样：

<ul id="mainNav">
<li><a href="#">Main Item 1</a></li>
<li class="dropdown"><a href="#" DATA="BLAH">Main Item 2</a> <!-- STUFF GOES HERE -->
   <ul class="dropdown-submenu"> <!-- and here -->
    <li><a href="#">subitem1</a></li>
    <li><a href="#">subitem2</a></li>
   </ul>
</li>
<li><a href="#">Main Item 3</a></li>
<li class="dropdown"><a href="#" DATA="BLAH">>Main Item 4</a>
   <ul class="dropdown-submenu">
    <li><a href="#">subitem3</a></li>
    <li><a href="#">subitem4</a></li>
   </ul>
</li>
</ul>

我希望这是有道理的。我正在尝试遍历子元素并向子元素（ul）添加类，然后转到父元素（li）并向其添加类以及（a）元素。我完全迷路了，如果你们能提供帮助，我将不胜感激！！！谢谢大家！！！

4

1 回答 1

3

使用单个 jQuery 行来做这件事相当简单：

$('#mainNav ul').addClass('dropdown-submenu').parent('li').addClass('dropdown');

请注意，使用 css 选择器，我们只是找到ulmainNav 的任何元素，然后添加一个类，然后我们链接另一个函数以找到它的父级，并在下拉列表中添加一个类。

编辑：
要根据问题中的示例将数据属性添加到 a 标记，请find('a:first').attr('data', 'BLAH')像这样链接位： 

$('#mainNav ul').addClass('dropdown-submenu').parent('li').addClass('dropdown').find('a:first').attr("data", "BLAH");

编辑 2：
要解决 ul 子级的下一个级别，并且可能不会让所有子级 ul 具有相同的类，您可以使用以下脚本： 

$('#mainNav > li > ul').addClass('dropdown-menu').parent('li').addClass('dropdown').find('a:first').attr('data-toggle', 'dropdown').addClass('dropdown-toggle');  
$('#mainNav ul ul').addClass('dropdown-child-menu').parent('li').addClass('dropdown-child');`

注意第一行选择器的变化：这确保我们只得到ul顶层li元素的直接后代。

第二行选择器告诉它获取所有第三层+ul元素（它将获取所有第三层、第四层等ul元素）。

于 2012-11-09T02:38:16.347 回答