17.09 JQuery親要素&&兄弟要素&&子要素セレクタ

3058 ワード

まず例コードをください.以下の説明に便利です.

一.親要素を取得します.parent(selector) && .parents(selector) && parentsUntil();セレクタオプション
1.現在一致する要素の親要素を取得します.parent(selector)、たとえば
$('.the_test').parent()    //     a       , 4  li  

さらに増加することもできます
$('.the_test').parent().parent()    //     ul  

当たり前のように
$('.the_test').parent().parent().parent()    //      div  

もちろんこのように使うことをお勧めしません.長すぎて、きれいではありません.まだ効率がありませんか.0.0 2.現在の一致する要素の各祖先要素を取得します.parents(selector)、たとえば
$('.the_test').parents()    //  ul、div、body、html  

単に1つの「s」を追加するだけで、以上の取得はaラベルのすべての祖先要素であり、ul、div、body、html、ドキュメントの根元までを含む.このように、このセレクタを使用する場合、ブラシを追加することが多い.
$('.the_test').parents('li')    // 4  li  
$('.the_test').parents('div')    // 4   div  

3.parentsUntil()は、リフレッシュが一致するオブジェクト(セレクタが一致するオブジェクトを含まない)まで、現在の一致する要素の各祖先要素のセットを取得します.
$('.the_test').parentsUntil('ul')    //     4  li    

注意:ブラシは必須で、parentsUntilの「U」は大文字で、親測小文字は無効で、アルパカの名前(以下同)
二.兄弟要素を取得します.next() && .nextAll() && .andSelf() && .prev() && .prevAll();5つだけで類似性があります
1.現在一致するエレメントの次の兄弟エレメントを取得します.next()
$('.the_test').next()    //   2  a  

もちろんつなぎ合わせることもできます!
$('.the_test').next().next()    //   3  a  

2.現在一致する要素以下のすべての兄弟要素を取得する.次のように
$('.the_test').nextAll()    //   2、3、4  a  

これにブラシを加えるともっと使いやすくなります.
$('.the_test').nextAll('.the_test2')    //   4  a  

3.現在の一致要素を含む、現在の一致要素の下にあるすべての兄弟要素を取得します.
$('.the_test').andSelf()      //     a  
$('.the_test').andSelf('.the_test2')      //   1、4  a  

4.残りprev() && .prevAll()は言わない、と.next() && .nextAll()は似ていますが、nextは下、prevは上です.(上に自分を含めてないみたい?まあ~下に自分を含めても使えるとは限らない)
三.サブエレメントの取得
1.>,これは例を挙げて説明しなければならない
$('.the_ul > li')    //  ul     li  

段階的に進めなければならないので,級を越えて書くのは役に立たない.
$('.the_ul > a')    //false,        
$('.the_ul > li > a')    //true,      a    
  • .children()は、一致する要素の子要素(息子、孫などが転がっているだけ)を得る
  • $('.the_ul').children()    //      li  
    $('.the_li').children('.the_test')    //   1  a    
    
  • .find()は、現在の一致する要素の子孫要素を得るために、ブラシは必ず選択され、これは使いやすく、何世代おきに見つけることができます(効率は高くありませんか?)
  • $('div').find('.the_test')    // div   ,   1  a    
    

    これで全部お話しします.複数のセレクタを組み合わせて、つなぎ合わせて使うと、いつも欲しい要素のオブジェクトが見つかりますよね?