Use Javascript to match elements with a class pattern

Question

Hi I have a number of elements:

<div data-stage-1="hello">Hello</div>
<div data-stage-2="hello">Hello</div>
<div data-stage-3="hello">Hello</div>

Using Javascript how would i pull these elements into an array by matching their similar data attributes? (Not the 'hello', but the 'data-stage-x')

Michael Berkowski · Accepted Answer · 2012-02-06 22:17:33Z

2

You may be able to use the attributes property of the <div> element. The following is untested...

var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++) {
  var d = divs[i];
  // Loop over attributes and check their names...
  for (var a=0; a<d.attributes.length; a++) {
    if (d.attributes[a].name.indexOf("data-stage-") === 0) {
       // it's a match...
    }
  }
}

edited Feb 6, 2012 at 22:17

answered Feb 6, 2012 at 22:11

Michael Berkowski

271k47 gold badges452 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colin Brock Over a year ago

I think d.attributes[a].indexOf might need to be d.attributes[a].name.indexOf, otherwise great answer.

Michael Berkowski Over a year ago

@Colin Thanks. I was just setting up a test instance to find the correct property there. You saved me a minute or two

Collectives™ on Stack Overflow

Use Javascript to match elements with a class pattern

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related