Jquery find() class 帶正則表達式

Question

我有一個內部有圖標的 div 元素，我想使用 find() 方法返回 4 種類型的圖標中的哪一種。 有沒有辦法使用帶有正則表達式的 find() 來返回 class？

編輯：我已經更新了 div 以顯示<i>如何在 div 中“埋”而不是直接孩子

<div id="a" class="tile">
   <span>
       <span>
           <i class="led-red"></i>
           Led Red
       </span>
   </span>
</div>

<div id="b" class="tile">
   <span>
       <span>
           <i class="led-green"></i>
           Led Green
       </span>
   </span>
</div>

<div id="c" class="tile">
   <span>
       <span>
           <i class="led-yellow"></i>
           Led Yellow
       </span>
   </span>
</div>

var rexValues = /(led-green|led-yellow|led-red|led-null)/;

//this would work for element "a" if element "a" had the class attached,
//but because the class is buried inside I need to use find()
var aclass = a.className.match(rexValues);

//I'm looking to do something more like
var aclass = $(a).find(rexValues);

這是排序 function 的一部分，我在其中根據圖標對 div 進行排序。 我基於的解決方案在這里： https://stackoverflow.com/a/46026203/9537489

Answer 1

不需要時不要使用正則表達式

我正在使用您鏈接答案中的排序順序

如果您在瓷磚附近沒有 static 容器，則container可以是document.body ，但是如果容器中有其他東西，則瓷磚將被移動。 讓我知道您是否需要就地更換

我使用[...nodeList]擴展語法，因為sort不是 nodeList 的本機方法。 注意：展開必須在 querySelectorAll 語句上，否則圖塊將不會保留其排序順序

 const container = document.body; // document.getElementById("container"); const sortOrder = { red: 0, orange: 1, yellow: 2, green: 3 }; const tiles = [...container.querySelectorAll(".tile")]; // needed for the.sort const getClassStartingWith = (elem, cls) => [...elem.classList].filter(clss => clss.startsWith(cls))[0]; const prefix = "led-"; tiles.sort((a, b) => { const aClass = getClassStartingWith(a.querySelector("i"), prefix).replace(prefix, "");; const bClass = getClassStartingWith(b.querySelector("i"), prefix).replace(prefix, ""); console.log(aClass,sortOrder[aClass],bClass, sortOrder[bClass],sortOrder[aClass] - sortOrder[bClass]) return sortOrder[aClass] - sortOrder[bClass] }); tiles.forEach(tile => container.appendChild(tile))

 <div id="c" class="tile"> <span> <span> <i class="led-yellow"></i> Led Yellow </span> </span> </div> <div id="b" class="tile"> <span> <span> <i class="led-green"></i> Led Green </span> </span> </div> <div id="a" class="tile"> <span> <span> <i class="led-red"></i> Led Red </span> </span> </div>

Answer 2

jQuery 中的find方法不支持此功能。 您可以使用一個擴展來添加此功能

那些帶有前綴的類是有限的還是唯一的？ 您可以使用選擇器startsWith （ [<attr>^=<value>] ，即[class^=led-] ）。 如果您不想添加基於 jQuery 的功能，這里是 CSS 選擇器參考