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

问题在于它还会在我的例子中选择第3个DIV。

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

Answer 1

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

的类

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

Answer 2

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

Answer 3

这是前缀

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

这是为了开始，所以你不需要有＆＃39; - ＆＃39;那里的char

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

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

Answer 4

虽然这里的最佳答案是针对提问者特定情况的解决方法，但如果您正在寻找实际使用＆＃39;以＆＃39;开头的解决方案。关于个别班级名称：

您可以使用此自定义jQuery选择器，我将其称为:acp()，用于＆＃34; A类前缀。＆＃34;代码位于这篇文章的底部。

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

这将选择任何和所有<div>元素，这些元素至少有一个以给定字符串开头的类名（＆＃34; starting_text＆＃34;在本例中），无论该类是否在开头或者类属性字符串中的其他地方。

<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黑客攻击我没有后端控制的网站，所以我经常需要找到具有动态后缀的类名的元素。它非常有用。

Answer 5

试试这个：

$("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;
})

Answer 6

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

在这种情况下作为问题Josh Stodola的回答是正确的以＆＃34; apple开头的课程 - ＆＃34;加上包含＆＃34;的类苹果 - ＆＃34;

$("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");

可能会帮助其他人谢谢

Answer 7

如果元素具有多个类，则[[class ^ ='apple-']“无效，例如

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

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

7 个答案: