Question

这里要澄清一个例子：

所以我们有

<div id="div1" class="a b c">
<div id="div2" class="a b c d">
<div id="div3" class="a b e f">

JS：

var allClasses = ".a.b.c.d";

$(allClasses) // will select div2 and not div1 and div3

但我想改进这个脚本，以便选择div1和div2而不是div3，因为它在allClasses中我们有.a.b.c.d并且它匹配div1和div2类并且它与div3不匹配，因为在div3中没有班级d 所以我想要的是选择所有类与字符串类匹配的元素

让我更清楚一点：

如果var allClasses = ".a.b.c.d.e.f.g.h.i.j";

$( some implementation here using allClasses)

必须在allClasses变量中选择具有不会遗漏的类的元素例如

<div id="div11" class="a b e f z"> // will not be selected
<div id="div12" class="a b e f g"> // will be selected
<div id="div13" class="a b e f omg"> // will not be selected

Answer 1

一种解决方案是选择具有其中一个类的所有元素，然后删除所有具有不在列表中的类的元素：

// Turn ".a.b.c" into ".a,.b,.c"
var anyOfAllClasses = allClasses.replace(/\./g, ",.").substring(1);

// Retrieve all "candidates" and filter them
$(anyOfAllClasses).filter(function() {

    // Require that each of their classes appears in your list
    return this.className.split(/\s+/).reduce(function(currentlyAcceptable, nextClass) {
        return currentlyAcceptable && (allClasses + ".").indexOf("." + nextClass + ".") >= 0
    });
});

<强> Example Fiddle

值得注意的是，由于我使用reduce，这在IE8中不起作用。如果你需要支持IE8，你当然可以做一个常规循环。

Answer 2

如果我们假设您的类属性中始终具有给定的类顺序，则可以使用属性选择器：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="a b c">DIV 1</div>
<div id="div2" class="a b c d">DIV 2</div>
<div id="div3" class="a b c e f">DIV 3</div>

BasePageHandler.js

我会创建一个自动化函数，它将使用你的'.a.b.c.d'为我创建这样的选择器并返回上面的那个。创建这样的函数会非常简单。然后，这将有很多DOM元素恰好包含给定组合中的一个。

Answer 3

<div id="div1" class="a b c">
<div id="div2" class="a b c d">
<div id="div3" class="a b e f">
<script>
$('.a, .b, .c, .d')
</script>

类选择器，用于选择具有选择器

3 个答案: