1

我将 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”的类的情况。“-delete-confirm 情况”怎么样？我可以有一个涵盖两种情况的选择器吗？

感谢您的任何意见！

问候。

4

2 回答 2

8

你可以像这样组合它们。

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

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

使用 end-with 选择器和类选择器的组合。

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

演示

于 2013-07-02T04:37:41.360 回答
3

类只是另一个属性吗？

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

一些需要注意的事项：

  • 如果该项目有多个类别，它是否有效？
  • 如果该项目有多个类并且您要匹配的是属性值中显示的第一个类，它是否有效？
  • 如果是最后一个呢？
  • 如果该项目的类包含您要查找的类名，它是否有效？（在你的例子中，也许no-delete-confirm-available）？

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

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

不一样的班级

处理这个问题的正确方法是使用不同的类 - 可能有任何添加类的过程*-delete-confirm也添加另一个类 - 可能has-delete-confirm是什么。然后您可以选择它，而不必担心类属性。

全选，然后 filter()

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

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

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

您可能还会发现这个类似的问题很有趣：
jQuery:How to select elements with specific class here?

于 2013-07-02T04:47:44.980 回答