Mootools wildcard selector

Question

How can I select all elements whose IDs start with "row_", for example "row_223425" and "row_at264" etc.?

What I am ultimately trying to do is give a background colour to each even .productWrapper div in this structure:

<div id="container">
    <div id="row_2531865">
       <div class="productWrapper">
          Product 1 content here...
       </div>
    </div>
    <div id="row_5f62825">
       <div class="productWrapper">
          Product 2 content here...
       </div>
    </div>

    etc etc

</div>

I have tried selecting every second .productWrapper div using many variations of the .productWrapper:even and :odd pseudoclasses, and #container:nth-child(n+1) too.

Side Note: I don't really care if the "row_" div or the .productWrapper div are selected, because when it comes to design and apperance they are one and the same as far as the end user is concerned.

So my next attempt was to try :even and :nth-child() variations on the "row_" divs, but I need to know how to use wildcards in mootools.

Any ideas?

Answer 1

You can use the "startsWith" selector in mootools:

var elems = $('container').getElements('div[id^=row_]');

This will select all the div elements whose id attribute starts with "row_". If you want to select all the elements whose id starts with "row_" and not just div elements, use the following:

var elems = $('container').getElements('*[id^=row_]');

Check out the working example here