JQuery:如何编写一个选择器来查找具有以给定子字符串结尾的类的元素?
我将JQuery用于我的Web应用程序。 我不知道如何为这种情况编写选择器。
text text
我需要找到所有类别以“-delete-confirm”结尾的链接,或者有一个名为“delete-confirm”的类。
我知道如何处理一个名为“delete-confirm”的类的情况。 “删除 – 确认情况”怎么样? 我可以让一个选择器覆盖两种情况吗?
谢谢你的任何输入!
问候。
你可以像这样组合它们。
var $allofthem = $('[class$="-delete-confirm"],.delete-confirm');
注意,因为如果类名出现在元素的类列表的末尾,并且以-delete-confirm
结束,这只是一个属性值以选择器结束
使用结束选择器和类选择器的组合。
对于纯粹的选择,您可以这样做(无论它出现在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'); });
演示
类只是另一个属性吗?
这种情况的问题在于将类视为另一个属性,并且使用属性选择器很少能以一致的方式获得您正在寻找的内容。
有些项目需要注意:
- 如果项目有多个类,它是否有效?
- 如果项目有多个类并且您匹配的类是属于第一个显示在属性值中的类,它是否有效?
- 如果它是最后一个呢?
- 如果项目的类包含您要查找的类名,它是否有效? (在你的例子中,也许
no-delete-confirm-available
)?
请记住,当您动态添加和删除类时,无法保证在获取class
属性的值时,类将显示哪个顺序。
如果您有一组非常严格的情况,那么将使用它,特别是如果元素只有1个类,则属性选择器可以工作。 否则,我建议你使用不同的方法。
一个不同的阶级
处理这个的正确方法是使用不同的类 – 可能有任何进程添加*-delete-confirm
类也添加另一个类 – 也许has-delete-confirm
或其他东西。 然后你可以选择那个,而不必担心class属性。
选择全部然后过滤()
另一个不理想但比属性选择器更好的选项是选择所有可能的元素,然后使用回调函数filter()
结果,该函数使用正则表达式查找匹配的类。
$('#links a').filter(function () { return /(^|\s|-)delete-confirm(\s|$)/.test($(this).attr('class')); });
您可能也会发现这个类似的问题:
jQuery:如何在这里选择具有特定类的元素?