JQuery：如何编写一个选择器来查找具有以给定子字符串结尾的类的元素？

I use JQuery for my web application. I don't know how to write a selector for this situation.

我将JQuery用于我的Web应用程序。我不知道如何为这种情况编写选择器。

<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 has a class ending with "-delete-confirm" or has a class called "delete-confirm".

我需要找到所有类别以“-delete-confirm”结尾的链接，或者有一个名为“delete-confirm”的类。

I know how to handle the situation of having a class called "delete-confirm". How about the "-delete-confirm situation"? Can I have a single selector covering two situations?

我知道如何处理一个名为“delete-confirm”的类的情况。 “删除 - 确认情况”怎么样？我可以让一个选择器覆盖两种情况吗？

Thanks for any input!

谢谢你的任何输入！

Regards.

问候。

2 个解决方案

#1

You can combine them like this.

你可以像这样组合它们。

var $allofthem = $('[class$="-delete-confirm"],.delete-confirm');

Note since this is just an attribute value ends with selector if the class name appears in the end of the list of classes for an element and ends with -delete-confirm will be only considered

注意，因为如果类名出现在元素的类列表的末尾，并且以-delete-confirm结束，这只是一个属性值以选择器结束

Use ends-with selector and combination of your class selector.

使用结束选择器和类选择器的组合。

For pure selection you can do this (Doesn't matter where it appears in the classList or how many classes it has):

对于纯粹的选择，您可以这样做（无论它出现在classList中的位置或它有多少个类）：

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');
});

Demo

演示

#2

Is class just another attribute?

The problem with this type of situation is that treating class as just another attribute, and using attribute selectors will rarely get you what you're looking for in a consistent manner.

这种情况的问题在于将类视为另一个属性，并且使用属性选择器很少能以一致的方式获得您正在寻找的内容。

Some items to be aware of:

有些项目需要注意：

• Does it work if the item has multiple classes?
• 如果项目有多个类，它是否有效？
• Does it work if the item has multiple classes and the one you're matching against is the first class that shows up in the attribute value?
• 如果项目有多个类并且您匹配的类是属于第一个显示在属性值中的类，它是否有效？
• What about if it's the last one?
• 如果它是最后一个呢？
• Does it work if the item has a class that contains the classname you're looking for? (in your example, maybe no-delete-confirm-available)?
• 如果项目的类包含您要查找的类名，它是否有效？ （在你的例子中，也许没有删除 - 确认 - 可用）？

Keep in mind too that when you're adding and removing classes dynamically, there's no guarantee which order the classes will show up in when you get the value of the class attribute.

请记住，当您动态添加和删除类时，无法保证在获取class属性的值时，类将显示哪个顺序。

If you have a very strict set of circumstances this will be used in and especially if the element will only have 1 class, an attribute selector may work. Otherwise, I'd recommend that you use a different approach.

如果您有一组非常严格的情况，那么将使用它，特别是如果元素只有1个类，则属性选择器可以工作。否则，我建议你使用不同的方法。

A different class

The proper way to handle this is to use a different class - maybe have whatever process is adding the *-delete-confirm classes also add another class - maybe has-delete-confirm or something. Then you can select on that, and not have to worry about the class attribute.

处理这个的正确方法是使用不同的类 - 可能有任何进程添加* -delete-confirm类也添加另一个类 - 也许has-delete-confirm或其他东西。然后你可以选择那个，而不必担心class属性。

Select all and then filter()

Another option that's 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 regular expression to find matching classes.

另一个不理想但比属性选择器更好的选项是选择所有可能的元素，然后使用回调函数过滤（）结果，该函数使用正则表达式查找匹配的类。

For example, if the elements are all <a> children of #links, you could use this:

例如，如果元素都是#links的子元素，则可以使用：

$('#links a').filter(function () {
    return /(^|\s|-)delete-confirm(\s|$)/.test($(this).attr('class'));
});

---

You may also find this this similar question to be of interest:
jQuery:How to select elements with particular class here?

你也可能会发现这个类似的问题：jQuery：如何在这里选择具有特定类的元素？