子供の子供を選択する

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：私はexpanderをクリックすると

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

それは私のli要素にクラスを追加しません。どうして？ .children()にJQuery documentationから

Answer 1

：

.children（）メソッドは、その.children中）（.findは異なる（）のみ は（.findながらDOMツリーの単一レベルを下っ）は、子孫要素（孫、 など）を選択するために複数のレベルを下に を横断することができます。

実際には.children()を使用する必要はありません。はるかに簡単な解決策は、セレクタの後にJQueryに第2引数を渡すことで、ただprovide context for your queriesになります。

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

Answer 2

あなたはまだあなたが（与えられた答えは方法によって優れている、いないよう）しているとして、それに近づくにしたい場合は、変更するには、この

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

これまで：

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

の子供を選択するそれはです。

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>