通过classname的一部分查找类

Question

i trie to get a full classname "i-need-this-2" from a part of known-classname "i-need-this-" of a element.

Example

<div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>

I trie to get the complete classes of the element, make a array, and search with indexof for the wanted class, but my code failed.

partofclassname='i-need-this-';
let allclasses = $('#myelement').attr('class').split(' ');
let wanted_class= allclasses[allclasses.indexOf(partofclassname)];

wanted_class is undefined and indexof is -1

What is wrong with my code?

Thanks a lot.

Answer 1

Your code is almost there. When you use split it will return an array. You can use filter function and in the callback use includes . So this array will have those classes which includes the keyword you are looking for

 let partofclassname = 'i-need-this-'; let matchedClass = $('#myelement').attr('class').split(' ').filter(item => item.includes(partofclassname)); console.log(matchedClass) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div> 

Answer 2

allclasses.indexOf(partofclassname) will check for complete string(class). For part you need check each element of array. Use Array.prototype.find() and check in each element of array using String.prototype.indexOf()

 partofclassname='i-need-this-'; let allclasses = $('#myelement').attr('class').split(' '); console.log(allclasses) let wanted_class = allclasses.find(c => c.indexOf(partofclassname) !== -1); console.log(wanted_class) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div> 

Answer 3

With RegExp :

 var patt =/\\bi-need-this-[^ ]*/g ; let allclasses = document.getElementById('myelement').className ; console.log( allclasses.match(patt)[0] ) ; 

 <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div> 

Answer 4

You need to do indexOf on the class name value instead of doing that in the array of those class name:

 let partofclassname='i-need-this-'; let allclasses = $('#myelement').attr('class').split(' '); let index = allclasses.findIndex((className) => className.indexOf(partofclassname) !== -1); let wanted_class= allclasses[index]; console.log(wanted_class); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div> 

Answer 5

Because indexOf find exact match of elements.

try filter instead.

 let partofclassname = 'i-need-this-'; let allclasses = $('#myelement').attr('class').split(' '); let wanted_class = allclasses.filter(e => e.includes(partofclassname)); console.log(wanted_class) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div> 

Answer 6

There are multiple ways to achieve your desired classname.

• You could efficiently use .find() along with includes() as follows -

 let allclasses = $('#myelement').attr('class').split(' '); let partofclassname='i-need-this-'; let wanted_class = allclasses.find(element => element.includes(partofclassname)); console.log(wanted_class); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div> 

• You could simply do it using a loop & includes as follows -

 let allclasses = $('#myelement').attr('class').split(' '); let partofclassname='i-need-this-'; let wanted_class = undefined; allclasses.forEach(element => { wanted_class = element.includes(partofclassname) ? element : wanted_class }); console.log(wanted_class) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="myelement" class="firstclass i-need-this-2 anotherclass"></div>