jQueryセレクタを使用して前の要素を選択する

Question

jQuery selectorのみを使用して前の要素を選択する必要があります。

<li class="collapsable"> 
    <div class="hitarea collapsable-hitarea"></div> 
    <span id="devicelist" class="ankr">Device List</span> 
    <ul id="ultree"> 
     <li type="dev" device="/dev/sdh1" id="dev0" class="litab"> 
      <img height="20px" width="20px" src="../Images/drive.png" class="dicon"> 
      <a class="ankr dn" href="#">'/dev/sdh1'</a> 
     </li> 
    </ul> 
</li> 

$(document).on("click","#devicelist,**Here Selector will be used**",this,function(event){ 
    console.log(this); 
    console.log(event.target); 
}); 

.hitareaのdivを選択したいと考えています。私は何かを探しています$("#devicelist:div.hitarea")

これは、jQueryのselectorでのみ行う必要があります。

Answer 1

$（ 'hitarea'）もセレクタです。述べたように、意図したターゲットに最も近い非動的に追加された要素にバインドする必要があります（すべてのイベントの代表団と同様に）

$('#devicelist,.hitarea') 

Answer 2

もしprev()セレクタ

説明使用することができます必要に応じてセレクタによってフィルタリング整合要素の組 の各要素の直前の兄弟を取得します。

$('#devicelist').prev(); 

Answer 3

まずon()方法：

あなたは、セレクタとしてこれを使用することができますAPI内：

ほとんどの場合、クリックなどのイベントが頻繁に発生せず、パフォーマンスに重大な懸念はありません。しかし、マウスやスクロールなどの高頻度のイベントは1秒間に数十回発火する可能性があり、そのような場合はイベントを慎重に使用することが重要になります。ハンドラ自体の処理量を減らしたり、再計算するのではなくハンドラが必要とする情報をキャッシュしたり、setTimeoutを使用して実際のページ更新数をレート制限したりすることで、パフォーマンスを向上させることができます。

多くの委任されたイベントハンドラをドキュメントツリーの上部に付けると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQueryは、そのタイプのすべてのアタッチされたイベントのすべてのセレクタを、イベントターゲットからドキュメントの先頭までのパスのすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素に可能な限り近いドキュメントの場所にアタッチします。大きなドキュメントで委任されたイベントに対しては、documentまたはdocument.bodyを過度に使用しないでください。これを考慮して

（jQueryのが最初に実行されるときにulまたはolがページ内に存在することを仮定して）私は、その要素に直接結合することをお勧めしたい：

$('ul').on(/* other stuff */); 

ではなくdocumentへ自体。

コメントに書いたように、CSSには以前の兄弟セレクタがなく、jQuery（これまでのところ私が知っている限り）はその不足を補うことはできません。あなたは、インデックスを知っていれば

$('ul').on('click', function(){ 
    var elem = $('#devicelist'); 
    if (elem || elem.prev()) { 
     // do stuff here 
    } 
}); 

あなたは、もちろん、（あなたは2番目の子要素に焦点を当てていることを考えると）できます。もっと簡潔として書か

$('ul').on('click', function(e){ 
    if (e.target.id == 'devicelist' || $('#devicelist').prev()) { 
     // do stuff here 
    } 
}); 

：これはの明白な解決策を残し単純に以下を使用してください：

$('ul').on('click', function(e){ 
    if ($(e.target).index() < 2) { 
     // do stuff here for the first two elements 
    } 
});