jQuery selector：'starts＆with＆ends-with'does not work on element with multiple classes

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屬性在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"將是一個匹配。