Filtre jQuery à travers les identifiants, puis capture les correspondances

Question

Je me retrouve à répéter cela.

$jq("button").filter(function(){ 
    return this.id.match(/^user_(\d+)_edit$/); 
}).click(function(){ 
    var matches = this.id.match(/^user_(\d+)_edit$/); 
    var user_id = matches[1]; 

    alert('click on user edit button with ID ' + user_id); 
}); 

Je veux appliquer un clic événement pour certains boutons et dans le gestionnaire d'événement click je besoin de l'ID utilisateur. Y a-t-il un moyen d'éviter le deuxième match?

$jq("button").filter(function(){ 
    return this.id.match(/^user_(\d+)_edit$/); 
}).click(function(){ 
    var user_id = some_magic_variable; 

    alert('click on user edit button with ID ' + user_id); 
}); 

Merci.

Answer 1

Comment éviter la première correspondance?

$jq("button[id^=user][id$=edit]").click(function() { 

}); 

sélectionnerait tous les boutons qui ont un ID utilisateur et starts withends with modifier.

Bien honnêtement, regarder votre cas d'utilisation, il serait bien préférable de donner simplement tous les boutons qui sont destinés à modifier un utilisateur une classe de « edit_user » et puis juste faire:

$jq('button.edit_user').click(function() { 

}); 

Il est plus propre, plus rapide, et la façon jQuery d'obtenir tous les éléments qui servent un but similaire.

En ce qui obtenir l'ID utilisateur il y a eu une discussion animée sur des attributs personnalisés sur ce site (Custom attributes - Yay or nay?) et je fais personnellement data-userid='5' dans mes éléments, puis juste faire var id = $(this).attr('data-userid'); pour obtenir l'ID. Agréable et facile. Ne validera pas en tant que XHTML, cependant.

Answer 2

Vous pouvez stocker l'ID sur l'élément lui-même (en utilisant la méthode data de jQuery) lorsque vous effectuez le filtre, puis extrayez cette valeur dans le gestionnaire de clic.

$jq("button").filter(function(){ 
    var $this = $jq(this); 
    var matches = $this.attr('id').match(/^user_(\d+)_edit$/); 

    if (matches) { 
     $this.data('idNumber', matches[1]); 
    } 

    return matches; 
}).click(function(){ 
    var user_id = $(this).data('idNumber'); 

    alert('click on user edit button with ID ' + user_id); 
}); 

Answer 3

Personnellement, je préprocesser DOM:

$(function() { 

$("button").each(function() { 
     var matches = $(this).attr("id").match(/^user_(\d+)_edit$/); 

     if (matches) { 
     $(this).data("user_edit_id",matches[1]); 
     } 
    } 
}); 

Ensuite, vous pouvez simplement:

$("button").filter(function(){ 
    return $(this).data("user_edit_id"); 
}).click(function(){ 
    var user_id = $(this).data("user_edit_id"); 

    alert('click on user edit button with ID ' + user_id); 
}); 

Ce n'est pas une solution parfaite pour ce que vous voulez, mais il est une façon ...