Получить элементы с похожими идентификаторами, используя jQuery - PullRequest
Новая
       7

Получить элементы с похожими идентификаторами, используя jQuery

4 голосов
/ 01 марта 2012

У меня есть div-блоки с адресами, у каждого адреса есть своя кнопка, кнопка должна открывать диалог, в котором вы можете редактировать определенный адрес.

Идентификаторы кнопок всегда edit_address_ (число), а номер является идентификатором базы данных.Таким образом, числа не похожи на 1,2,3, но могут быть 12, 35, 122, диалоговые окна, которые нужно отобразить, имеют идентификаторы dialog-form_ (число).

Итак, как реализовать что-то первым, получитьконечные числа существующих идентификаторов, а затем сделать цикл для него 

$( "#dialog-form_$i" ).dialog({
    autoOpen: false,
    height: 300,
    width: 390,
    modal: true
    });

$('#edit_address_$i').button().click(function() {
    $('#dialog-form_$i').dialog('open');
});

Я знаю, что этот код не работает таким образом, но как его реализовать?

Ответы [ 3 ]

7 голосов
/ 01 марта 2012

Для каждого элемента, идентификатор которого начинается с «edit_address_», привяжите событие щелчка, которое откроет соответствующее диалоговое окно, извлекая фактический идентификатор базы данных, о котором вы говорите. 

$("[id^='edit_address_']").click(function() {
    var id = this.id.split('_')[2];
    $('#dialog-form_' + id).dialog('open');
}).button();

Примечание:в зависимости от типа элемента, вы можете поставить перед начальным селектором тэг, чтобы он работал быстрее.Например: "input[id^='edit_address_']" или "button[id^='edit_address_']"

5 голосов
/ 01 марта 2012

Поскольку идентификаторы генерируются динамически, гораздо проще добавить общее имя класса ко всем элементам управления, например, «edit_address», тогда селектором будет просто имя класса. Добавление еще одного простого атрибута данных для уникального идентификатора, который необходимо использовать как числовой идентификатор, а затем минимизирует необходимость разбора атрибутов 

<button id="edit_address_$i" class="edit_address" data-id="$i">Text</button>

$('.edit_address').click(function(){
    $('#dialog-form_' + $(this).data('id') ).dialog('open');
})
3 голосов
/ 01 марта 2012

Использование селектора атрибутов в jQuery : 

$("input[id^='edit_address_']​​​​​​​​​​​​​​​​").each(function() {
    $( "#" + this.id ).dialog({
         autoOpen: false,
         height: 300,
         width: 390,
         modal: true
    });
});

$("input[id^='edit_address_']​​​​​​​​​​​​​​​​").click(function() {
    $('#dialog-form_$i').dialog('open');
});

Вот краткое изложение операторов селектора атрибутов: 

=  is exactly equal
!= is not equal
^= starts with
$= ends with
*= contains
...