如何在 jQuery 中使用 [att~="val"] 选择器获取 CSS 子类答案

【问题标题】：How to get CSS subclass with [att~="val"] selector in jQuery如何在 jQuery 中使用 [att~="val"] 选择器获取 CSS 子类
【发布时间】：2012-02-24 04:33:08
【问题描述】：

我在获取元素中子类的值时遇到了一些困难。通常，我会使用.hasClass 或.attr("class") 进行验证，然后进行比较，但我试图获取动态生成的子类的值。

假设我有一个class="edit step1"。我只需要得到 step1 部分，但它不能取决于最后的数字，因为它可以是任何东西。我尝试了.hasClass("~step") 和其他一些功能，但没有骰子。

有没有人遇到过需要这样做并有解决方案的情况，但即使是关于我应该在哪里寻找的任何提示都将不胜感激。

谢谢！

【问题讨论】：

显示一些 HTML，我觉得你在滥用类。
在所有元素上没有数字的情况下添加另一个名为“step”的类可能更干净/更容易
很抱歉。 <div class="edit step1"> </div> <div class="edit step2"> </div> 我只需要“步骤”部分。
@Chimoo 不幸的是，这是不可能的，因为这些类是在另一个文件中生成的，并且由于后来的一些集成而必须具有这种结构。
只是想我应该澄清一下：~ 本身就是通用的兄弟组合子，在 CSS3 中引入。然而，jQuery 确实 not 实现了这个组合器，所以在像 $('h3 ~ p') 这样的 jQuery 选择器中使用它在不支持它的 IE6 中不起作用。您可能需要编辑您的问题，以明确您要选择的具体内容，因为这可能会使某些人感到困惑。

标签： jquery regex jquery-selectors

【解决方案1】：

这对类来说不是很好用，特别是因为它们已经以非结构化方式存储在元素属性中。这将是“数据步骤”标签的一个很好的用途。

如果您可以依靠正在结构化的名称，最好的办法可能是拆分类列表并查看每个元素。

$('div[class~=" step"]').each(function(){
    steps = this.attr('class').match(/\bstep\d+/);
})

如果您遇到这种次优情况，上述方法可能有效

【讨论】：

你有没有机会提到<div data-step="1">？如果是这样的话 - 谢谢你的这件了不起的事情！ :D 我肯定会强制这样做，但首先我必须找到一些关于这个标签的文档。
@peter：是的，那么追踪你的脚步就变得相对微不足道了。它只是 html5，但我从未见过浏览器抱怨它们在非 html5 文档中的使用。 more here
太棒了！感谢代码（我现在将使用它）和我必须强制执行的数据步骤标签想法。 :D

【解决方案2】：

.attr("class") 将返回“编辑步骤 1”。

将其视为字符串。您可以使用.split(" ") 将其转换为数组，然后您可以循环遍历这些值并评估其中的内容。

【讨论】：

正确答案，但我不得不选择险恶的那个，因为这个给了我一个额外的步骤，他还给了我“数据步骤”标签的想法。无论如何投票是有用的，因为它是正确的，它只是解决我的问题的另一种方法。谢谢！