使用jQuery獲取具有類似ID的元素

我有帶地址的div盒，每個地址都有自己的按鈕，按鈕應打開一個對話框，您可以在其中編輯某個地址。使用jQuery獲取具有類似ID的元素

按鈕ID總是edit_address_（number），並且數字是數據庫的ID。所以這些數字不像1,2,3，但可以是12,35,122，顯示的對話框有對話框形式_（數字）。

因此，如何能實現的東西首先獲取現有ID的所有結局數字，然後讓它

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

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

環路我知道這個代碼不工作的方式，但如何實現呢？

來源

2012-03-01 sinini

由於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'); 
})

來源

2012-03-01 17:50:06 charlietfl

這是一個非常不錯的解決方案！我喜歡。謝謝 – sinini 2012-03-01 19:27:06

yup-一旦你得到了分類的概念，而不是尋找特定的項目，它使很多jQuery編碼變得更簡單 – charlietfl 2012-03-01 19:30:56

使用jQuery的attribute selector：

$("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

來源

2012-03-01 16:57:10

非常感謝你的解釋，我相信我可以用這個 – sinini 2012-03-01 19:28:29

有沒有辦法提供匹配點擊處理程序的ID到對話框 – charlietfl 2012-03-01 19:34:10

對於每一個元素的ID開始與「edit_address_」，綁定一個click事件，將打開通過提取您正在討論的實際數據庫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_']"

來源

2012-03-01 16:59:12

非常感謝！ – sinini 2012-03-01 19:30:33

使用jQuery獲取具有類似ID的元素

回答

相關問題