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

如果我有以下内容：

<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，然后将其拆分为一个数组，然后使用正则表达式遍历每个单独的问题？还是有一个更优雅/更简洁的解决方案？

以“ apple-”开头的类以及包含“ apple-”的类

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

我建议将“苹果”作为自己的课程。如果可以的话，应该避免使用“开始于” /“结束于”，因为能够选择“使用” div.apple会更快。那是更优雅的解决方案。如果它使任务更简单/更快，请不要害怕将它们分成单独的类。

这是前缀

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

这是从头开始的，所以您不需要在其中有'-'字符

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

您可以在这里https://api.jquery.com/category/selectors/找到jQuery选择器的许多其他很酷的变体

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

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

试试这个：

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

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

在这种情况下，乔什·斯托多拉（Josh Stodola）的问题是正确的，以“ apple-”开头的类以及包含“ apple-”的类

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

但是如果元素具有多个这样的类

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

那么Josh Stodola的解决方案将无法正常工作，
因为它必须做这样的事情

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

可能对别人有帮助吗

如果元素具有多个类，则“ [class ^ ='apple-']”类将不起作用，例如

<div class="fruits apple-monkey"></div>