How to select parent element with a particular class in jQuery?

Question

I have the following element structure.

<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>

Now I want to write a click event such as

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

but I do not want the click event for those <a> elements whose parent <li> element have either active or disabled class.

Rory McCrossan · Accepted Answer · 2016-11-15 08:43:56Z

4

You can use :not in the selector:

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

Alternatively you can check the class of the parent within the click handler itself. This approach would be better if the active and disabled classes are dynamically changed:

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

    // your code here...
});

answered Nov 15, 2016 at 8:43

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samir · Accepted Answer · 2016-11-15 08:50:21Z

0

You can also use .parents() to find the parents,

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

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

   // Rest of the code...

});

edited Nov 15, 2016 at 8:50

answered Nov 15, 2016 at 8:49

Samir

1,3681 gold badge10 silver badges16 bronze badges

2 Comments

Rory McCrossan Over a year ago

You can only check one class at a time with hasClass()

Samir Over a year ago

Sry, its my mistake.

pranav-dev · Accepted Answer · 2016-11-15 09:11:27Z

0

No need of JS for removing click event of link.

If you want to remove the click for links whose li has class disabled or active then write below css-:

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

This will disable links whose parent li has disabled and active classes. You can also add css to highlight them to show as active or disabled.

answered Nov 15, 2016 at 9:11

pranav-dev

681 bronze badge

Collectives™ on Stack Overflow

How to select parent element with a particular class in jQuery?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related