Jquery find() class with regular expression-CodePudding

I have div elements that have an icon inside, and I want to use the find() method to return which of the 4 types of icons is inside. Is there a way to use find() with a regular expression to return the class?

EDIT: I've updated the divs to show how the <i> is "buried" within the div and not a direct child

<div id="a" >
   <span>
       <span>
           <i ></i>
           Led Red
       </span>
   </span>
</div>

<div id="b" >
   <span>
       <span>
           <i ></i>
           Led Green
       </span>
   </span>
</div>

<div id="c" >
   <span>
       <span>
           <i ></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);

This is part of a sort function where I am sorting the divs based on their icon. The solution I'm basing off of is here: https://stackoverflow.com/a/46026203/9537489

CodePudding user response：

the find method in jQuery doesn't support this. There is an extension that you could use to add this functionality

Are those classes with the prefix limited or unique? You could use the selector startsWith ([<attr>^=<value>], i.e. [class^=led-]). Here's the CSS selector reference if you don't want to add the jQuery based functionality

CodePudding user response：

Don't use regex when not needed

I am using the sort order from your linked answer

container can be document.body if you do not have a static container near the tiles, but then the tiles will be moved if you have other stuff in the container. Let me know if you need to replace in place

I use the [...nodeList] spread syntax because sort is not a native method of a nodeList. NOTE: the spread has to be on the querySelectorAll statement or the tiles will not retain their sort order

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" >
  <span>
    <span>
      <i ></i>
      Led Yellow
    </span>
  </span>
</div>
<div id="b" >
  <span>
    <span>
      <i ></i>
      Led Green
    </span>
  </span>
</div>
<div id="a" >
  <span>
    <span>
      <i ></i>
      Led Red
    </span>
  </span>
</div>