在单个类名称上使用“开头为”选择器

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

尽管这里的最佳答案是针对问询者的特殊情况的解决方法，但如果您正在寻找一种针对各个类名实际使用“开头为”的解决方案，请执行以下操作：

您可以使用此自定义jQuery选择器，我将其称为:acp()“ A Class Prefix”。代码在这篇文章的底部。

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黑客操作，因此我经常需要查找具有动态后缀的类名的元素。这非常有用。