Question

问题简单如下，当我尝试选择一个以关键字开头的类，并以另一个关键字结束时，这个工作正常，当且仅当元素有一个类时，如果元素有多个类，选择器将返回一个空集合。

以下是解释问题的代码

// try removing custom-class from first element --> returns 2

alert($("div[class^='start'][class*='end']").length) // will return 1 by default , only 1 element has single class.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-class start-mid-end" data-custom="1st Div">

</div>
<div class="start-mid-end" data-custom="2nd Div">

</div>

Answer 1

这是因为对于class="custom-class start-mid-end"元素，其class属性的值以custom开头，而不是start。请记住，属性选择器将属性值作为单个字符串进行操作;他们并不关心class属性是＆＃34;特殊＆＃34;在HTML中。

关于问题的解决方案：没有任何警告也没有。作为最实用的解决方法，我建议使用多个类而不是一个。例如，代替prefix-X-suffix而不是添加类prefix- -suffix，然后您可以使用

选择您的元素

$("div[.prefix-.-suffix]")

另一种选择是使用filter来自定义类选择逻辑，例如

$("div").filter(function() { return /\bstart\S*end\b/.test(this.className); })

正则表达式\bstart\S*end\b匹配前缀为start且后缀为end的任何非空白字符序列，这就是您所追求的。

Answer 2

您使用的选择器引用整个属性字符串，因此class="start what ever end"将匹配。

jQuery选择器：'starts-with＆amp;＆amp;结束 - '对多个类的元素不起作用

2 个答案: