jQuery 选择器：'starts-with && ends-with' 不适用于具有多个 类 的元素
jQuery selector : 'starts-with && ends-with' doesnt work on element with multiple classes
问题简单如下，当我尝试 select 以关键字开头并以另一个关键字结尾的 class 时，当且仅当元素具有单个 class，如果元素有多个 class，则 select 或 return 一个空集合。
这是解释问题的代码
// 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>
您使用的选择器引用了整个属性字符串，因此 class="start what ever end" 将是一个匹配项。
这是因为对于class="custom-class start-mid-end"的元素，其class属性的值以custom开头，而不是start。请记住，属性 select 或作为单个字符串对属性值进行操作；他们不关心 class 属性在 HTML.
中是 "special"
关于您的问题的解决方案：没有任何警告。作为最实际的解决方法，我建议使用多个 classes 而不是一个。例如，不只是 prefix-X-suffix 还添加 classes prefix- -suffix 然后您可以 select 您的元素只需使用
$("div[.prefix-.-suffix]")
另一种选择是使用 filter 自定义 class selection 逻辑，例如
$("div").filter(function() { return /\bstart\S*end\b/.test(this.className); })
正则表达式 \bstart\S*end\b 匹配任何具有前缀 start 和后缀 end 的非空白字符序列，这就是您所追求的。
问题简单如下，当我尝试 select 以关键字开头并以另一个关键字结尾的 class 时，当且仅当元素具有单个 class，如果元素有多个 class，则 select 或 return 一个空集合。
这是解释问题的代码
// 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>
您使用的选择器引用了整个属性字符串，因此 class="start what ever end" 将是一个匹配项。
这是因为对于class="custom-class start-mid-end"的元素，其class属性的值以custom开头，而不是start。请记住，属性 select 或作为单个字符串对属性值进行操作；他们不关心 class 属性在 HTML.
关于您的问题的解决方案：没有任何警告。作为最实际的解决方法，我建议使用多个 classes 而不是一个。例如，不只是 prefix-X-suffix 还添加 classes prefix- -suffix 然后您可以 select 您的元素只需使用
$("div[.prefix-.-suffix]")
另一种选择是使用 filter 自定义 class selection 逻辑，例如
$("div").filter(function() { return /\bstart\S*end\b/.test(this.className); })
正则表达式 \bstart\S*end\b 匹配任何具有前缀 start 和后缀 end 的非空白字符序列，这就是您所追求的。