使用jQuery获取具有相似ID的元素

Question

我有一些包含地址的div框，每个地址都有一个编辑按钮，当点击按钮时应该弹出一个对话框来编辑特定的地址。

这些按钮的ID始终为edit_address_(number)，其中number是数据库中的ID。所以这些数字不是像1、2、3这样的连续数字，而可能是12、35、122之类的数字，展示对话框的ID是dialog-form_(number)。

那么如何实现首先获取现有ID的所有结尾数字，然后为其创建循环呢？

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

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

我知道这段代码不能这样运行，但是如何实现它呢？

- sinini

Answer 1

为每个ID以“edit_address_”开头的元素绑定点击事件，通过提取实际的数据库ID，打开相应的对话框。

$("[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_']"

• jQuery选择器
• .click()

- Didier Ghys

Answer 2

由于ID是动态生成的，因此将一个通用类名添加到所有控件中，例如“edit_address”，这样选择器就只需要使用类名即可。再添加另一个简单的数据属性作为唯一标识符，例如数字ID，这样可以最小化解析属性的需求。

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

$('.edit_address').click(function(){
    $('#dialog-form_' + $(this).data('id') ).dialog('open');
})

- charlietfl

---

这是一个非常不错的解决方案！我喜欢它。谢谢。 - sinini

是的，一旦你掌握了将事物分类而不是寻找特定项目的概念，jQuery编码就会变得更简单。 - charlietfl

Answer 3

使用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

- James Hill

---

无法提供方法将点击处理程序中的ID与对话框匹配。 - charlietfl