选择一个孩子的孩子 [英] Select a child of a child

问题描述

为什么我不能在jQuery中选择一个孩子?我想使用.children()方法和>选择器为孩子的孩子添加一个类.参见下面的代码:

Why can't I select a child of a child in jQuery? I want to add a class to a child of a child using .children() method and the > selector. See code below:

$(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元素中.为什么?

When I click on expander it will not add the class to my li elements. Why?

推荐答案

来自 JQuery文档 在.children():

.children()方法与.find()的不同之处仅在于.children() 在.find()可以遍历的同时沿DOM树向下移动一个级别 在多个级别下选择后代元素(孙子， 等).

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().简单得多的解决方案是 为您的查询提供上下文 通过在选择器之后向JQuery传递第二个参数.

You really don't even need to be using .children() for this at all. The much simpler solution is to just provide context for your queries by passing a second argument to JQuery after the selector.

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

这篇关于选择一个孩子的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！