CODEWITHSUNDEEP
javascriptjquery
mikeD
mikeD

Reputation: 229

Find a class by a part of classname

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.

Upvotes: 3

Views: 121

Answers (6)

Tushar Walzade
Tushar Walzade

Reputation: 3809

There are multiple ways to achieve your desired classname.

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>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

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>

Upvotes: 1

Maheer Ali
Maheer Ali

Reputation: 36564

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>

Upvotes: 1

brk
brk

Reputation: 50291

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>

Upvotes: 4

zmag
zmag

Reputation: 8241

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>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 0

Related Questions