javascript - querySelectorAll to find matching data-attribute - Stack Overflow

My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I

My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I are interested in.

On the main page I use a parse query display a module for each show stored in the database. As each module is created, I use this code to add a data attribute to the show's outermost div, corresponding to the show's object ID in parse:

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

I'm successfully able to retrieve the showId of a specific show when the user clicks on the show's module:

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

That all works great, proving that assigning the data-attribute is working.

Where I'm running into trouble is trying to find an element with a specific data attribute or a specific value for that attribute on a given page. The end goal is to get the y-offset of that div so I can scroll the page to the appropriate spot. I assumed I could use the following code to find the element, but it isn't working -

// 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']");

The first of those 3 works, proving that all the elements I'm interested in are loaded into the page by the time I'm calling this function, but the 2nd and 3rd queries return nothing.

Any idea what I'm doing wrong here? Is it something with syntax? Is querySelectorAll just inpatible with how I'm setting the data attribute?

I tried to include only what I figured are the salient bits of code, but if more is necessary please let me know.

My app uses a Parse backend to keep a running list of all the concerts in my area that my friends and I are interested in.

On the main page I use a parse query display a module for each show stored in the database. As each module is created, I use this code to add a data attribute to the show's outermost div, corresponding to the show's object ID in parse:

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

I'm successfully able to retrieve the showId of a specific show when the user clicks on the show's module:

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

That all works great, proving that assigning the data-attribute is working.

Where I'm running into trouble is trying to find an element with a specific data attribute or a specific value for that attribute on a given page. The end goal is to get the y-offset of that div so I can scroll the page to the appropriate spot. I assumed I could use the following code to find the element, but it isn't working -

// 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']");

The first of those 3 works, proving that all the elements I'm interested in are loaded into the page by the time I'm calling this function, but the 2nd and 3rd queries return nothing.

Any idea what I'm doing wrong here? Is it something with syntax? Is querySelectorAll just inpatible with how I'm setting the data attribute?

I tried to include only what I figured are the salient bits of code, but if more is necessary please let me know.

Share Improve this question edited Jan 26, 2014 at 23:16 Rob W 349k87 gold badges807 silver badges682 bronze badges asked Jan 26, 2014 at 23:09 mitchUXmitchUX 531 silver badge4 bronze badges 1
  • Possible duplicate of Selecting element by data attribute – faintsignal Commented Sep 30, 2018 at 23:28
Add a ment  | 

2 Answers 2

Reset to default 2

Try This

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

For more info, look here:

Selecting element by data attribute

jQuery's .data method does not create a HTML attribute, but associates a value in its internal data store with the element.

If you want to set a data attribute with jQuery, then you need to use:

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

To get the value, you can use .data('showId') or .attr('data-showId').

(note that HTML attributes are case-insensitive, so you can also write "data-showid" instead.)

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745508821a4630679.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信