在各个类名上使用'starts with'选择器

Question

如果我有以下内容:

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

我可以使用以下选择器来查找前两个DIV:

$("div[class^='apple-']")

但是,如果我有这个:

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

它只会找到第二个DIV,因为第一个div的类以字符串形式返回(我认为)并且实际上并不以'apple-'开头,而是'some-'

一种方法是不使用开头,而是包含:

$("div[class*='apple-']")

问题是它还会在我的例子中选择第三个DIV.

问题:通过jQuery,在单个类名上使用谓词选择器的正确方法是什么,而不是将整个类属性用作字符串？它只是抓住CLASS,然后将它分成一个数组,然后用正则表达式遍历每个单独的一个？或者是否有更优雅/更简洁的解决方案？

Answer 1

以"apple-"开头的类以及包含"apple-"的类

$("div[class^='apple-'],div[class*=' apple-']")

Answer 2

我建议把"苹果"作为自己的班级.如果可以的话,你应该避免使用开始/结束,因为能够选择使用div.apple会更快.这是更优雅的解决方案.如果它使任务更简单/更快,不要害怕将事物拆分成单独的类.

Answer 3

这是用于前缀的

$("div[class^='apple-']")

这是为了开始,所以你不需要在那里有' - '字符

$("div[class|='apple']")

你可以在这里找到一堆其他很酷的jQuery选择器 https://api.jquery.com/category/selectors/

Answer 4

虽然这里的最佳答案是针对提问者特定情况的解决方法,但如果您正在寻找一种解决方案,以便在单个类名上实际使用'starts with':

您可以使用此自定义jQuery选择器,我称之为:acp()"A类前缀".代码位于这篇文章的底部.

var test = $('div:acp("starting_text")');

这将选择<div>具有至少一个以给定字符串开头的类名的任何和所有元素(在此示例中为"starting_text"),无论该类是在类属性字符串的开头还是其他位置.

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

这将返回元素1,2和3,但不返回 4或5.

这是:acp自定义选择器的声明,您可以放在任何地方:

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

我做了这个因为我做了很多GreaseMonkey黑客攻击我没有后端控制的网站,所以我经常需要找到带有动态后缀的类名的元素.这非常有用.