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>元素具有<li>或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以突出显示它们以显示为活动或禁用。

如何在jQuery中选择具有特定类的父元素？

3 个答案: