在单个类名上使用‘ start with’选择器

如果我有以下资料:

<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-']")

问题是，在我的示例中，它还将选择第3个 DIV。

问: 通过 jQuery，对单个类名使用谓词选择器而不是将整个 class 属性作为字符串使用的正确方法是什么？是不是只需要获取 CLASS，然后将它分割成一个数组，然后使用 regex 遍历每个独立的数组？还是有更优雅/更简洁的解决方案？

177847 次浏览
小开

我建议把“苹果”变成自己的类。如果可以的话，您应该避免使用 start-with/end-with，因为使用 div.apple进行选择会快得多。这是更优雅的解决方案。如果这能使任务更简单/更快，不要害怕把事情划分成单独的类。

小开

试试这个:

$("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;
})
小开
最佳答案

以“ apple-”开头的类加上包含“ apple-”的类

$("div[class^='apple-'],div[class*=' apple-']")
小开 
<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

在这种情况下，作为问题乔希斯托多拉回答是正确的 以“ 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");

也许能帮到别人，谢谢

小开

这是前缀

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

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

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

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

小开

虽然这里的最佳答案是针对提问者的特殊情况的变通方案，但如果你正在寻找一种解决方案，在单个类名上实际使用“ start with”:

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

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

这将选择至少有一个以给定字符串开头的类名的任何和所有 <div>元素(本例中为“ start _ 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 黑客的网站上，我没有后端控制，所以我经常需要找到具有动态后缀类名称的元素。非常有用。


提交答案