jquery getElementsByClassName find partial class name

Question

I want to use the javascript function getElementsByClassName to loop in some html divs that don't have the exactly class name, but it starts with the same text: "akordeon-item"

So, the html text looks like this:

<div class="akordeon-item akordeon-item-first">

<div>
    <span class="userid">
          blabla@yahoo.com
    </span>
</div>
</div>
<div class="akordeon-item akordeon-item-second">

<div>
    <span class="userid">
          john_doe@yahoo.com
    </span>
</div>
</div>
<div class="akordeon-item akordeon-item-third">

<div>
    <span class="userid">
          john_doe2@yahoo.com
    </span>
 </div>
 </div>

 <div class="akordeon-item akordeon-item-fourth">

<div>
    <span class="userid">
          john_doe3@yahoo.com
    </span>
</div>

Also, the javascript code I tried is this one:

var slides = getElementsByClassName(".akordeon-item");
for(var i = 0; i < slides.length; i++)
{
   alert("element : "+slides[i]);
}

I also tried searching for this string inside the getElementsByClassName method : "akordeon-item"

How can I make this loop work? Please help...

Remove the period `.`, `getElementsByClassName` takes the literal class name, not a selector — CodingIntrigue, Jun 13 '14 at 12:05
Note that unless the search expression has an anchor, doing this will inspect *all* elements in your document. — Ja͢ck, Jun 13 '14 at 12:08

martynas · Accepted Answer · 2014-06-13T12:10:34.727

25

There is a bunch of special selectors you can make use of:

^= is starts with

$= is ends with    
=  is exactly equal
!= is not equal
*= is contains

Try:

$.each($('[class^="akordeon-item"]'), function(key, value) {
    console.log(key, value);
});

Alternative ways to iterate over the set:

$('[class^="akordeon-item"]').each(function(key, value) {
    console.log(key, value);
});

Or using a for loop:

var slides = $('[class^="akordeon-item"]');
for (var i = 0; i < slides.length; i++) {
    console.log(slides[i]);
}

edited Jun 13 '14 at 12:10

answered Jun 13 '14 at 12:05

martynas

12,120
3
55
60

1

And this would be `function(index, value) {` more relevant.. since it wont get any key values.. – Rajaprabhu Aravindasamy Jun 13 '14 at 12:09
@SomnathKharat the first word in the title is `jquery`. Also, the question is tagged under `jquery`. – martynas Jun 13 '14 at 12:09
he added jquery to his tags – gulty Jun 13 '14 at 12:09
and what it would harm if do this jQuery way @somnathkharat. – Jai Jun 13 '14 at 12:10
Thank you so much for all the answers, this one suits me best. Thanks a lot @martynas! – user3256429 Jun 13 '14 at 12:14
I know the answer is 1,5 years old, but what is the reason you use `$.each($(selector)` instead of `$(selector).each()`? – Rvervuurt Jan 15 '16 at 12:34
@Rvervuurt No reason - you can do it any way you like :-) – martynas Jan 15 '16 at 14:03

score 2 · Answer 2 · answered Jun 13 '14 at 12:06

2

$('div[class^="akordeon-item"]').each(function(index){});

answered Jun 13 '14 at 12:06

RGS

5,131
6
37
65

jquery getElementsByClassName find partial class name

2 Answers2