Have Geek Brain

CSS selector for grouped iterations

I have a range of items that I want to iterate over 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 iterate over them as groups so that there are - using this example - 3 loop iterations (one for match-1, one for match-2 and one for match-3). 1,2,3, etc. is the variable used for grouping, but this is not fixed so it cannot rely on hardcoding those values. Is it possible? I'll be using jQuery or a prototype, but that shouldn't matter.

thanks

+2


a source to share


8 answers


Try the following:

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 over the list of items with a matching class, checks if it also has a class of form-x, gets x, and adds it to the list of matching groups using x as the index.

+4


a source


There is nothing like the description in standard CSS2 (that is, an implementation that is currently widely supported).

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 matches what you are trying to do. You can iterate with classic JS or jQuery .each()

.

+1


a source


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
+1


a source


EDIT

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

I hope I understood ur correctly. Is this wat ur lukin for?

0


a source 


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
}
0


a source


input[class^="matching match-"]

must work. I'm not sure what you mean by grouping.

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+'"]'))
}
0


a source


It might work. Don't have time to check it out 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++;
});
0


a source


This will create a list of your group:

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
    }
0


a source






More articles:


All Articles