jquery选择器ul标签的第一个孩子答案

【问题标题】：jquery selector first child of ul tagjquery选择器ul标签的第一个孩子
【发布时间】：2014-09-24 19:28:15
【问题描述】：

我有一个这样的菜单结构：

 <ul>
    <li><a href="">One</a>
    </li>
    <li class="active"><a href="">Two</a>
        <ul>
            <li><a href="">Sub One</a>
                <ul>
                    <li><a href="">Sub One One</a>...</li>
                    <li><a href="">Sub One Two</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Sub Two</a>
                <ul>
                    <li><a href="">Sub Two One</a>
                    </li>
                    <li><a href="">Sub Two Two</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Sub Tree</a>
            </li>
        </ul>
    </li>
    <li><a href="">Tree</a>
    </li>
</ul>

现在...如何在“活动”类中选择所有子第一个“ul”标签？

sample, active > "ul" (sub one) > "ul" (sub one one) ... etc.

【问题讨论】：

您是否希望所有子 UL 在悬停时都处于活动状态？
请贴出你目前尝试过的代码？？？
Kartikeya 我没试过.. Nadeem 等.. 但加载页面打开所有子 ul
示例：jsfiddle.net/qe4zkw02/3 但不是动态级别
你的问题是`我怎样才能先选择所有子"ul"`

标签： javascript jquery html jquery-selectors

【解决方案1】：

你可以这样选择

JQuery

$('ul li.active>ul') 或 $('li.active').children('ul')

CSS

ul li.active ul {}

【讨论】：

ReferenceError: ul is not defined。您的选择器需要放在一个字符串中。
只选择第一个子 ul 标签
@HashemQolami 那是我的错

【解决方案2】：

$("li.active").find("ul") 可以解决问题。以下是简单的代码，您可以在其中记录活动 li 中的所有 UL 元素。

var ulArr = $("li.active").find("ul");

console.log("First UL of active li is: " + ulArr[0]);

$.each(ulArr, function(index, element) {
  console.log("Child UL number " + index + " is: " + element);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="">One</a>
    </li>
    <li class="active"><a href="">Two</a>
        <ul>
            <li><a href="">Sub One</a>
                <ul>
                    <li><a href="">Sub One One</a>...</li>
                    <li><a href="">Sub One Two</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Sub Two</a>
                <ul>
                    <li><a href="">Sub Two One</a>
                    </li>
                    <li><a href="">Sub Two Two</a>
                    </li>
                </ul>
            </li>
            <li><a href="">Sub Tree</a>
            </li>
        </ul>
    </li>
    <li><a href="">Tree</a>
    </li>
</ul>

【讨论】：

您的选择器需要放在一个字符串中。
只有第一个 ul 的选择
结果将在活动 li 内为您提供 ul 数组，即使它在某些元素内更远。所以，你必须循环数组
类似var ulArr = $("li.active").find("ul")。 ulArr.forEach(//Code)
请回答这个问题 - 您要选择活动列表中的第一个 ul 还是所有 uls？我会相应地编辑我的答案

【解决方案3】：

试试

$("li.active >ul:first")

【讨论】：

@TamerAğaoğlu ，您没有包括 jquery。工作演示jsfiddle.net/buhn1j9d/1

【解决方案4】：

$('.active ul>li>a').first()

$(function() {
  var active = $('.active ul>li>a').first().addClass('red');

});

.red {
  color:red !important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

 <ul>
  <li><a href="">One</a>
  </li>
  <li class="active"><a href="">Two</a>
    <ul>
      <li><a href="">Sub One</a>
        <ul>
          <li><a href="">Sub One One</a>...</li>
          <li><a href="">Sub One Two</a>
          </li>
        </ul>
      </li>
      <li><a href="">Sub Two</a>
        <ul>
          <li><a href="">Sub Two One</a>
          </li>
          <li><a href="">Sub Two Two</a>
          </li>
        </ul>
      </li>
      <li><a href="">Sub Tree</a>
      </li>
    </ul>
  </li>
  <li><a href="">Tree</a>
  </li>
</ul>

【讨论】：