javascript - 如何选择或识别一个元素，该元素的类在其他不相关的类中以特定模式开头？

Question

$('[class*=" col-"], [class^="col-"]').css('text-decoration','underline');

[class*=" col-"], [class^="col-"]
{
  background: #39F;
  color: #FFF;
  border: 10px solid #16A;
  height: 50px;
  text-align: center;
  line-height: 28px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
    <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
  </div>

  <div class="row">
    <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
    <div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
  </div>

  <div class="row">
    <div class="so many classes 
                col-xs-6">.col-xs-6</div>
    <div class="bootstrap spam helper classes
                col-xs-6">.col-xs-6</div>
  </div>  
</div>

因此，过去曾提出过一个非常类似的问题，但我想我的问题涉及更多一点，即我想知道这是否是在生产站点上使用 Bootstrap 是一个坏主意的另一个例子。

在 jQuery(或 CSS)中，您可以使用 [class^="foo-"] 通过选择器的开头来选择元素。但有时我正在寻找的目标类不是类数组中的第一个类。

例如，在 Bootstrap 中，您使用许多帮助程序类来构建您的站点。我想测试一个元素是否具有 Bootstrap 使用的众多 col-* 类中的任何一个。但相同的元素可以应用任意数量的其他类。因此，使用 mySelectedJqueryElement.is('[class^="col-"]') 几乎总是返回 false，即使该项目具有以 col- 开头的类。

在 this回答这个非常相似的问题时，他们首先建议为该前缀创建一个类，但是出于同样的原因，您选择像 Bootstrap 这样的框架，我宁愿不编辑核心 Bootstrap 代码。然后他们继续建议使用开头和包含选择器...虽然这可能有效，但我想知道是否有任何方法可以显式查找以 开头的任何类的类数组col- 或 foo-，如果你愿意的话。我确实意识到我可以编写一个函数来提取类数组并运行正则表达式函数来手动检查数组中每个类的开头，以查看它们中是否有任何一个以预定模式开头。这似乎应该存在于 javascript 或 jQuery 中。

还有其他一些questions和 answers类似，但都没有完全准确地解决这个问题。

标记为包含问题的重复项...我知道它很相似，但我想我在这里问两个问题，这是不好的做法。第一，我想知道通过检查所有类的前缀来选择元素的问题是否有更好的答案。当前的答案是使用两个选择器来完成一项任务，如果这确实是唯一的方法，那么我想我可以接受它，但它似乎效率低下且不具体。理论上，带有空格的通配符选择器永远不会找到任何您不希望它找到的内容，但这似乎很严厉。其次，我假设虚拟 DOM 将类存储在数组中，但显然我错了。我绝对认为将一系列变量存储为单个字符串是一种不好的做法。

我的第二个问题是是否有任何 Bootstrap 的快速修复可以解决这个问题，就像“重复”问题中所建议的那样，他们建议将“apple-”作为一个新类。我是否可以运行一个快速的正则表达式替换，使“col”成为一个独立的类？这听起来像是解决这个问题的更好方法，但这会使 Bootstrap 类更加不“面向对象”，这就是为什么我认为我会将它们全部转储在一起。

Answer 1

属性包含字符串选择器: http://api.jquery.com/attribute-contains-selector/

来自 jQuery API:

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.

包含单词选择器(用于比较): http://api.jquery.com/attribute-contains-word-selector/