Question

I have a number of elements that i want to loop through as groups. Consider this HTML:

<input class="matching match-1" />
<input class="matching match-1" />
<input class="matching match-2" />
<input class="matching match-2" />
<input class="matching match-2" />
<input class="matching match-3" />
<input class="matching match-3" />
// etc

I want a CSS selector that would allow me to loop through these as groups so there would be – using this example – 3 iterations of the loop (one for match-1, one for match-2 and one for match-3). The 1,2,3 etc is a variable used for grouping but this is not fixed so it cannot rely on hard coding of these values. Is this even possible? I’ll be using jQuery or prototype not that that should matter really.

Thanks

Answer 1

Try this:

var groups = [];
$(".matching").each(function(index, elem) {
   if (this.className.match(/(?:^|\s+)match-(\d+)(?:\s|$)/)) {
       if (typeof groups[RegExp.$1] == "undefined") {
           groups[RegExp.$1] = [];
       }
       groups[RegExp.$1].push(this);
   }
});

This will iterate the list of elements with the class matching, test if it also has a class of the form match-x, get the x and add it to the list of match groups using x as index.