jQuery фильтрует по идентификаторам, а затем фиксирует совпадения

Question

Я ловлю себя на том, что делаю это неоднократно.

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

Поэтому я хочу применить щелчок событие для некоторых кнопок и в обработчике событий click мне нужен идентификатор пользователя.Есть ли способ, которым я могу избежать второго матча?

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

Спасибо.

Answer 1

Как насчет того, чтобы избежать первого матча?

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

});

Бы выбрать все кнопки, у которых есть идентификатор, который начинается с пользователь и заканчивается на Редактировать.

Хотя, честно говоря, глядя на ваш вариант использования, было бы намного лучше просто присвоить всем кнопкам, которые предназначены для редактирования пользователя, класс "edit_user", а затем просто выполнить:

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

});

Это более чистый, быстрый и jQuery-способ получения всех элементов, которые служат аналогичной цели.

Что касается получения идентификатора пользователя, то на этом сайте было оживленное обсуждение пользовательских атрибутов (Пользовательские атрибуты - Да или нет?) и я лично делаю data-userid='5' в моих элементах, а затем просто сделайте var id = $(this).attr('data-userid'); чтобы получить удостоверение личности.Красиво и легко.Однако он не будет проверяться как XHTML.

Answer 2

Вы могли бы сохранить идентификатор в самом элементе (используя jQuery данные метод), когда вы выполняете фильтрацию, а затем извлекаете это значение в обработчике щелчков.

$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

Лично я бы предварительно обработал DOM:

$(function() {

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

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

Тогда вы можете просто:

$("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);
});

Это не идеальное решение для того, чего вы хотите, но это один из способов...