filtrer jQuery par ID, puis capturer des correspondances

Question

Je trouve moi-même le faire repeatedy.

$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 cliquez sur événement pour certains boutons et dans le gestionnaire d'événement click je besoin de l'ID utilisateur. Est-il possible que je peux é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

Que diriez-vous d'éviter le premier match?

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

});

sélectionnerait tous les boutons qui ont une carte d'identité que commence par l'utilisateur et se termine par 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 », puis il suffit de faire:

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

});

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

En ce qui concerne l'obtention de l'ID utilisateur il y a eu une discussion animée sur des attributs personnalisés sur ce site ( attributs personnalisés - Yay ou non ) et je fais personnellement dans mes éléments data-userid='5' et fais juste pour obtenir le var id = $(this).attr('data-userid'); ID?. Nice et facile. Ne validera pas comme XHTML, cependant.

Answer 2

Vous pouvez stocker l'ID de l'élément lui-même (en utilisant méthode ) quand vous faites le filtre, puis récupérer 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étraiter les 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);
});

Il est pas une solution parfaite à ce que vous voulez, mais il est une façon ...