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 选择器参考