如何在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)

但是，我不希望那些父<a>元素具有active或disabled类的元素的单击事件。

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

你也可以用.parents()找到父母，

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

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

   // Rest of the code...

});

Answer 3

不需要JS删除链接的click event。

如果要删除li禁用类或活动的链接的单击，请在css-：

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

这将禁用父li禁用和活动类的链接。您还可以添加css以突出显示为活动或禁用。