JQuery: how to write a selector to find elements with a class ending with a given substring?
I am using JQuery for my web application. I don't know how to write a selector for this situation.
<a class="abc def xyz-delete-confirm efg">text</a>
<a class="abc def delete-confirm">text</a>
I need to find all links that have a class ending in "-delete-confirm" or have a class "delete-confirm".
I know how to handle the situation with a class called "delete-confirm". How about "-department-confirmation of the situation"? Can I have one selector covering two situations?
Thanks for any input!
Sincerely.
source to share
You can combine them like this.
var $allofthem = $('[class$="-delete-confirm"],.delete-confirm');
Note, since this is just an attribute value ending with a selector, if the class name appears at the end of the class list for an element and ends with -delete-confirm
, only
Use ends - with a selector and a combination of your class selector.
For a clean selection, you can do this (it doesn't matter where it appears in theList class or how many classes it has):
var regExp = /-delete-confirm(\s|$)/; //I am sure regex can be improved
var $allofthem = $('a').filter(function(){
return regExp.test(this.className) || $(this).is('.delete-confirm');
});
source to share
Is the class just another attribute?
The problem with this type of situation is that treating a class as just another attribute and using attribute selectors will rarely lead to what you're looking for in a consistent way.
Some elements to know:
- Does this work if the element has multiple classes?
- Does it work if the element has multiple classes and the one you are matching is the first class that appears in the attribute value?
- How about the latter?
- Does this work if the element has a class containing the class name you are looking for? (in your example maybe
no-delete-confirm-available
)?
Remember also that when adding and removing classes dynamically, there is no guarantee of which classes will be displayed when you get the attribute value class
.
If you have a very strict set of circumstances this will be used, and especially if the element will only have one class, an attribute selector may be involved. Otherwise, I recommend that you take a different approach.
Another class
The correct way to deal with this is to use a different class - perhaps any process adding classes *-delete-confirm
will also add another class - perhaps has-delete-confirm
or something else. Then you can select that and not worry about the class attribute.
Select everything and then filter ()
Another option, which is not ideal, but will work better than an attribute selector, is to select all possible elements, and then filter()
your results with a callback function that uses a regex to find matching classes.
For example, if all elements are <a>
children #links
, you can use this:
$('#links a').filter(function () {
return /(^|\s|-)delete-confirm(\s|$)/.test($(this).attr('class'));
});
You may also find this similar question of interest:
jQuery: how to select elements with a specific class here?
source to share