Sélecteur CSS pour les itérations groupées

Question

J'ai un certain nombre d'éléments que je veux parcourir en groupe. Considérez ce 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 

Je veux un sélecteur CSS qui me permettrait de boucler à travers ceux-ci en tant que groupes il y aurait donc - en utilisant cet exemple - 3 itérations de la boucle (un pour match 1, une pour correspondance -2 et un pour le match-3). Le 1,2,3 etc est une variable utilisée pour le groupement mais ce n'est pas fixe donc il ne peut pas compter sur le codage dur de ces valeurs. Est-ce seulement possible? J'utiliserai jQuery ou un prototype, mais ce n'est pas vraiment important.

Merci

Answer 1

Essayez ceci:

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); 
    } 
}); 

Cela itérer la liste des éléments avec la classe correspondant, test si elle a aussi une classe de forme match-x, obtenir le x et l'ajouter à la liste des groupes de correspondance en utilisant x comme index.

Answer 2

EDIT

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

J'espère que je compris la question ur. Est-ce que c'est pour ça?

Answer 3

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 4

En CSS2 standard (c'est-à-dire l'implémentation actuellement largement supportée), rien de ce que vous décrivez n'est disponible. CSS3, cependant, a des sélecteurs plus flexibles, et heureusement pour vous, ils sont tous implémentés dans jQuery.

Essayez quelque chose comme ceci:

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

Ceci renvoie une collection jQuery des noeuds DOM qui correspondent à ce que vous essayez de faire. Vous pouvez effectuer une itération avec les fichiers JS classiques ou .each() de jQuery.

Answer 5

input[class^="matching match-"] devrait fonctionner. Je ne suis pas sûr de ce que vous entendez par regroupement si.

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 6

Cela pourrait fonctionner. Ne pas avoir le temps de le tester si 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 7

Cela va construire votre liste de groupes:

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

En utilisant 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