Question

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

<a class="abc def xyz-delete-confirm efg">text</a>

<a class="abc def delete-confirm">text</a>

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

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

感谢您的任何意见！

问候。

Answer 1

你可以像这样组合它们。

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

请注意，因为如果类名出现在元素类列表的末尾并以-delete-confirm结尾，这只是一个以selector为结尾的属性值，只会被视为 < / p>

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

对于纯粹的选择，您可以这样做（无论它出现在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

Answer 2

类只是另一个属性吗？

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

需要注意的一些事项：

如果项目有多个类，它是否有效？
如果项目有多个类并且您要匹配的类是第一个显示在属性值中的类，它是否有效？
如果是最后一个怎么办？
如果项目的类包含您要查找的类名，它是否有效？（在您的示例中，可能是no-delete-confirm-available）？

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

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

另一个班级

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

选择全部，然后过滤（）

另一个不理想的选项，但是比属性选择器效果更好的选择是选择所有可能的元素，然后filter()使用正则表达式查找匹配类的回调函数<a>。

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

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

你也可能会发现这个类似的问题是有意义的：
jQuery:How to select elements with particular class here?

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

2 个答案:

类只是另一个属性吗？

另一个班级

选择全部，然后过滤（）