如何將數據附加到DOM元素用於jQuery消費

我有一個項目列表，所有項都有一個id和一個值。我打印此列表中的一個PHP視圖腳本使用div的，就像這樣：如何將數據附加到DOM元素用於jQuery消費

<div class="myList"> 
    <div class="listItem item3 value4">item label</div> 
    <div class="listItem item5 value7">item label</div> 
    ... 
</div>

的想法是，包括一些jQuery的一些編輯功能附加到列表項。要操作每個項目，我需要jQuery中的項目ID和值ID，我現在通過查找類模式itemID和valueID並提取ID部分（當然這是每個項目的一個數字）來確定它們。然後使用這些ID做一個阿賈克斯電話更新列表中的正確項目（給它一個新的價值ID，用戶可以選擇）

我的問題：我做這個工作的方式，但對我來說似乎不太優雅。 jQuery .data方法在這裏似乎沒有什麼幫助，數據需要在jQuery進場前由php視圖腳本打印，因此數據需要存在於html結構中，然後由jQuery讀取。 html屬性

<div class="listItem" itemID="4" valueID="7">labeltext</div>

但這是一個好習慣嗎？有沒有更好的方式將數據「喂」給jQuery？這通常如何完成？

來源

2012-09-05 Asciiom

使用HTML5 data attributes：

<div class="listItem" data-item-id="4" data-value-id="7">labeltext</div>

你必須使用jQuery的.data() syntax的好處：

$('.listItem').eq(0).data('item-id'); // Returns: 4

來源

2012-09-05 21:55:07 Blender

這聽起來不錯，但它會在舊版瀏覽器（比如說IE7）上工作嗎？ – Asciiom

試試看看它是否有效。它應該工作。 – Blender

我會測試它，看起來像我正在尋找的。謝謝！ – Asciiom

您可以使用數據屬性：

<div class="listItem" 
    data-id="4" 
    data-valueId="7"> 
     labelText 
</div>

和恢復它們在JS中使用：（當你的選擇器在一個listItem class）

... 
var $this = $(this); //just an habit ;) 
var id = $this.data('id'); 
var valueId = $this.data('valueId'); 
...

來源

2012-09-05 21:59:32 greg

如何將數據附加到DOM元素用於jQuery消費

回答

相關問題