CSS selector for grouped iterations

Question

Hi,

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

EDIT

    for(i=0;i<3;i++){
   var str = ".matching-match-" + i;
        $(str).each(function(index) {
           //do something
          });
    }

I hope i understood ur question correctly. Is this wat u r lukin for?

Answer 2

max = parseInt($('.matching:last-child').attr('class').match(/d+/)[0]);
for(i = 1; i <= max; i++) {
  $els = $('.matching.match-'+i.toString());
  // do whatever you want on the group
}

Answer 3

In standard CSS2 (that is, the implementation that's currently widely supported) there is nothing like you describe available.

CSS3, however, has more flexible selectors, and luckily for you they are all implemented in jQuery.

Try something like this:

$("input[name^='match-']")

This will return a jQuery collection of DOM nodes that match what you're trying to do. You can iterate with either classic JS or jQuery's .each().

Answer 4

input[class^="matching match-"] should work. I'm not sure what you mean by grouping though.

Edit:

var groups = [];
var classes = {};
$('input[class^="matching match-"]').each(function() {
    classes[$(this).attr('class')] = 1;
});
for (c in classes) {
    groups.push($('input[class="'+c+'"]'))
}

Answer 5

This could work. Don't have time to test it though XD

var count = 1;
var alreadyCounted = new Array();
$(".matching").each(function(){
    if(typeof alreadyCounted[count] == 'undefined'){
        $('.match-'+count).each(){
            // DWTFYW
        }
        alreadyCounted[count] = true;
    }
    count++;
});

Answer 6

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.

Answer 7

This will build your group list:

var classList = []
    $('.matching').each(function(i,e) {
        var myClasses = ($(e).attr('class')).split(" ")
        classList[myClasses[1]] = true      
    })

    for (index in classList) {
        alert(index)
        //your code here
    } 

Answer 8

Using jQuery:

var indices = {};
var index;

$('.matching').each(function() {
    index = $(this).attr('class').match(/\d+$/);
    indices[index] = index;
});

// Now you have a unique list of matching numbers for your loops