javascript - 选择一个 child 的 child

Question

为什么我不能在 jQuery 中选择子项的子项？我想使用 .children() 方法和 > 选择器向 child 的 child 添加一个类。见以下代码:

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

来自 JQuery documentation 在 .children() 上:

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

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

$(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");
            }
        });
    });

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