Question

好的伙计们。我要做的是创建一个无序列表（ul），其中包含嵌套（ul）。我正在尝试修改main（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）元素。我完全迷失了，如果你们能帮助我，我会非常感激！谢谢大家!!!

Answer 1

使用单个jQuery行非常简单：

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

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

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

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

编辑2：
为了解决下一级别的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元素）。

获取元素的子元素和子元素的父元素:)

1 个答案: