Question

我有这样的菜单结构：

 <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”标签？

样本，有效＆gt; “ul”（sub one）＆gt; “ul”（一分一章）......等等。

Answer 1

你可以这样选择

<强> JQuery的

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

<强> CSS

ul li.active ul {}

Answer 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>

Answer 3

试

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

Answer 4

$（＆＃39; .active ul＆gt; li＆gt; a＆＃39;）。first（）

＆＃13;

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

＆＃13;

.red {
  color:red !important
}

＆＃13;

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

＆＃13;

jquery选择器ul标签的第一个子节点

4 个答案: