Question

为什么我不能在jQuery中选择孩子的孩子？我想使用.children()方法和>选择器为孩子的孩子添加课程。请参阅以下代码：

$(function(){
        // main expansion element
        $(".expander").click(function() {
            var subShown = $(this).children("ul > li").hasClass("show");
            if (!subShown) {
                $(this).children(".indented").slideDown('100').addClass("show");
                $(this).children(".caret").addClass("reversedCaret");
            } else {
                $(this).children(".indented").slideUp('100').removeClass("show");
                $(this).children(".caret").removeClass("reversedCaret");
            }
        });
    });

HTML：

<div class="expander">
                  <span class="caret downCaret right visibleCaret">+</span>
                  <ul>
                  <li class="category">Item 1<a href="http://www.google.com"></a></li>
                  <li class="indented"><a href="http://www.google.com">Item 2</a></li>
                  <li class="indented"><a href="http://www.google.com">Item 3</a></li>
                  </ul>
                </div>

当我点击expander时，它不会将该类添加到我的li元素中。为什么呢？

Answer 1

来自.children()上的 JQuery documentation ：

.children（）方法与.find（）的区别仅在于.children（）在.sind（）可以遍历时沿DOM树向下移动一个级别在多个级别选择后代元素（孙子，等）。

你甚至根本不需要使用.children()。更简单的解决方案是通过在选择器之后将第二个参数传递给JQuery来 provide context for your queries 。

＆＃13;

$(function(){
        // main expansion element
        $(".expander").click(function() {
        
           // Just for demonstration: *************************************************
           
            // 2 because of <span> and <ul>
           console.log($(this).children().length);          
           
           // 0 because anything beyond children isn't returned in the first place
           console.log($(this).children("ul > li").length); 
           // *************************************************************************
        
            //  By passing "this" as the second argument to JQuery, after the selector,
            //  it sets the context for the search to only "this", so the entire DOM
            //  is not searched, just the object that "this" is bound to.
            var subShown = $("ul > li", this).hasClass("show");
            if (!subShown) {
                $(".indented", this).slideDown('100').addClass("show");
                $(".caret", this).addClass("reversedCaret");
            } else {
                $(".indented", this).slideUp('100').removeClass("show");
                $(".caret", this).removeClass("reversedCaret");
            }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expander">
  <span class="caret downCaret right visibleCaret">+</span>
  <ul>
    <li class="category">Item 1<a href="http://www.google.com"></a></li>
    <li class="indented"><a href="http://www.google.com">Item 2</a></li>
    <li class="indented"><a href="http://www.google.com">Item 3</a></li>
  </ul>
</div>

＆＃13;

Answer 2

如果您仍然希望按原样接近它（而不是给定的答案，顺便说一下，那么更改

$(this).children("ul > li")

到此：

$(this).children('ul').children()

选择ul的孩子。

Answer 3

您可以使用.find('>ul>li')，例如：

var expander = $(".expander")

expander.on('click', function(){
  var li = expender.find('>ul>li')
  li.hasClass("show")
})

Answer 4

.querySelector

document.querySelector("section > div").classList.add("my-gray");

.my-gray{
  background: gray;
}

<section>
Foo
<div>
Bar
</div>
</section>

选择一个孩子的孩子

4 个答案: