Get a sibling div with specific class and is not disable

Question

I want to find a div with a class associated with it, but it must not be disabled. I am using following code for getting the next sibling, but it will return the next element with the "menuDiv" class.

var nextDiv=jQuery('div.subMenuBarhover').nextAll('.menuDiv:first');

but now I need the element which is not disable and id of all element is unkown.

How can I achieve this?

Answer 1

You said you are using a custom attribute to mark a div as disabled. I would recommend to always use data-* attributes for custom attributes, ie

<div data-disabled="true">

To select the next div without that attribute, use the negation pseudo class (aka :not selector) and the attribute selector:

jQuery('div.subMenuBarhover').nextAll('.menuDiv:not([data-disabled]):first');

If you want to find the next element where the data-disabled attribute has a certain value, use the attribute-equals selector:

jQuery('div.subMenuBarhover').nextAll('.menuDiv[data-disabled=false):first');

---

In general, have a look at all the existing selectors have try them out!

Answer 2

Try adding . not(':disabled') to your code as required.

not

disabled selector