jQueryで特定のクラスの親要素を選択する方法は？

Question

私は以下の要素構造を持っています。

<ul class="pagination floatRight margin-top-3x margin-right-2x search-pagination-cntr" id="logs_link_pager"><li class="hide disabled"><a href="/marketing/videoCall/history/businessID/f1f0e0d3-4e47-ba1a-1d57-5f9d009a41db"></a></li> 
    <li class="previous disabled"><a href="/marketing/videoCall/history/businessID/f1f0e0d3-4e47-ba1a-1d57-5f9d009a41db"><span aria-hidden="true" class="p0">« Previous</span></a></li> 
    <li class="active"><a href="/marketing/videoCall/history/businessID/f1f0e0d3-4e47-ba1a-1d57-5f9d009a41db">1</a></li> 
    <li class=""><a href="/marketing/videoCall/history/businessID/f1f0e0d3-4e47-ba1a-1d57-5f9d009a41db/page/2">2</a></li> 
    <li class="next"><a href="/marketing/videoCall/history/businessID/f1f0e0d3-4e47-ba1a-1d57-5f9d009a41db/page/2"><span aria-hidden="true">Next »</span></a></li> 
    <li class="hide"><a href="/marketing/videoCall/history/businessID/f1f0e0d3-4e47-ba1a-1d57-5f9d009a41db/page/2"></a></li> 
</ul> 

は今、私は

$('#logs_link_pager a').click(function(ev) 

ようなクリックイベントを書きたいが、私は、親<li>要素のいずれかactiveかdisabledクラスを持っているそれらの<a>要素のクリックイベントを望んでいません。

Answer 1

あなたはセレクタに:notを使用することができます。

$('#logs_link_pager li:not(.active, .disabled) a').click(function(ev) { 
    // your code here... 
}); 

別の方法としては、クリックハンドラ自体の中に、親のクラスを確認することができます。 activeとdisabledクラスが動的に変更されている場合は、このアプローチが良いだろう。

$('#logs_link_pager a').click(function(ev) { 
    if ($(this).closest('li').is('.active, .disabled')) 
     return; 

    // your code here... 
}); 

Answer 2

ます。また、リンクのclick eventを取り除くためのJSの

$('#logs_link_pager a').click(function(ev) { 

    if ($(this).parents('li').hasClass('active')) 

    // Rest of the code... 

}); 

Answer 3

不要、両親を見つけるために.parents()を使用することはできません。

あなたはそのliクラスが無効またはアクティブた後、css-下に書くのリンクのクリックを削除する場合：

#logs_link_pager li.disabled a, 
#logs_link_pager li.active a{ 
    pointer-events: none; 
} 

これは、親李クラスを無効にし、アクティブたリンクが無効になります。 cssを追加して強調表示して、アクティブまたは無効として表示することもできます。