querySelectorAll查找匹配的data-attribute

Question

我的應用程序使用Parse后端來保存我所有朋友和我感興趣的區域內所有音樂會的運行列表。

在主頁面上，我使用解析查詢顯示存儲在數據庫中的每個節目的模塊。 在創建每個模塊時，我使用此代碼將數據屬性添加到show的最外層div，對應於parse中show的對象ID：

var showId = object.id;
$("div.show_module:last").data("showId", showId);

當用戶點擊show的模塊時，我成功地能夠檢索特定節目的showId：

$("#showsList").delegate(".showModuleBody", "click", function() {
    var storeObjectId = $(this).closest("div.show_module").data("showId");
});

這一切都很有效，證明分配數據屬性是有效的。

我遇到麻煩的地方是嘗試在給定頁面上找到具有特定數據屬性或該屬性的特定值的元素。 最終目標是獲得該div的y偏移量，以便我可以將頁面滾動到適當的位置。 我假設我可以使用以下代碼來查找元素，但它不起作用 -

// find all elements with class .show_module
var allShows = document.querySelectorAll('.show_module');

// find all elements with showId data attribute
var showsWithShowId = document.querySelectorAll('[data-showId]');

// find all elements with a specific showId data attribute
var showToFind = document.querySelectorAll("[data-showId='2']");

這三個作品中的第一個，證明了我所感興趣的所有元素在我調用此函數時被加載到頁面中，但第二個和第三個查詢沒有返回任何內容。

知道我在這里做錯了嗎？ 它是語法的東西嗎？ querySelectorAll是否與我設置數據屬性的方式不兼容？

我試圖只包括我認為是代碼的重要部分，但如果需要更多，請告訴我。

Answer 1

jQuery的.data方法不會創建HTML屬性，而是將其內部數據存儲中的值與該元素相關聯。

如果要使用jQuery設置數據屬性，則需要使用：

$("div.show_module:last").attr("data-showId", showId);

要獲取該值，可以使用.data('showId')或.attr('data-showId') 。

（請注意，HTML屬性不區分大小寫 ，因此您也可以編寫“data-showid”。）

Answer 2

試試這個

$('*[data-customerID="22"]');

有關詳細信息，請查看此處：

按數據屬性選擇元素