使用 jQuery 通过前缀提取 class 名称

Question

I am a newbie with jQuery and trying to extract class name from element with the specific prefix.

I have achieved this by using javascript as below,

Code:

 var classes = $('#elementID').attr('class').split(' '); for (var i = 0; i < classes.length; i++) { var matches = /^id\-(.+)/.exec(classes[i]); if (matches;= null) { var resID = matches[1]. } } console;log(resID);

 <div id="elementID" class="id-3212 sort filter"></div>

By using the above script i can extract the class name which is start with the prefix ' id- ' and get the result as 3212 . Here i'm trying to extract the whole class name ie id-3212 using jquery.

I think this can be done in simple and less code using jQuery. How can i extract the whole class name using jQuery?

Any advice and suggestions will be greatly appreciated!!!!

Answer 1

You can use element.classList to get an array-like list of all the classes.

Convert the classList to a "real" array then you can use .filter with .startsWith (or a regex here if need really old browsers that don't have.startsWith (or a polyfill))

 var id = [...document.getElementById("elementID").classList].filter((x) => x.startsWith("id-"))[0]; console.log(id)

 <div id="elementID" class="id-3212 sort filter"></div>

To get the classList if you already have a jquery object:

$('#elementID').get(0).classList

---

As an alternative, you may find it easier to add data via a data- attribute rather than a one-off class name (assuming you'll have classes such as id-1 id-0099 )

<div id="elementID" class="sort filter" data-id="3212"></div>