JQuery selector by data attribute when data is added dynamically?

Question

I have a ul with several items. I populate the list dynamically after page load using jquery. As I add each list item, I also add an "itemID" to the data of that element using the jquery ".data()" function. Something like this:

var item = $('<li>My Item Name</li>');
item.data('itemID', '123ABC456');

Later, I need a selector to determine if there is any item in my item list with a specific itemID. First I tried using:

$('*[data-itemID="123ABC456"]');

This didn't work - and on further research, I discovered that this syntax only works if the data attribute was set in the DOM when the page was loaded; it doesn't work if you use the ".data" jquery method dynamically.

Next I tried:

$(':data(itemID==123ABC456)');

For some reason, this doesn't work. If I run simply $(':data(itemID)'), however, then I do get all the li elements that have an itemID in their data.

I know that the itemID attribute is set correctly, as when I call .data() on that list item I get:

Object { itemID="123ABC456"}

How can I select all elements that have an itemID of "123ABC456" in their data?

have you tried just iterating over all <li> items on a page that contain a data attribute and plucking the result you're looking for out of there? — tkone
– tkone, Commented Jul 26, 2012 at 14:49
I have made a JSfiddle. Effectivelly finding dynamic data by selector don't seem to work jsfiddle.net/molokoloco/A5652 "The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)." — molokoloco
– molokoloco, Commented Apr 18, 2014 at 14:53

Mark Pieszak - Trilon.io · Accepted Answer · 2012-07-26 15:04:48Z

12

http://jsfiddle.net/w28p9/1/ <-- jsFiddle example showing differences with data-attribute & jquery.data()

jQuery.data() is different than HTML5 data-NAME attributes which you are trying to search for.

http://api.jquery.com/jQuery.data/

jQuery.data() saves inside of the jquery element (this data is hidden from plain sight). Looking for [data-itemID] would work if inside of the actual had: <li data-itemID="12345"></li>.

To retrieve and look for the actual hidden .data() try:

// of course be more specific than just searching through all <li>'s
$('li').each(function () {
    if ( $(this).data('itemID') === '123ABC456' ) {
        // do whatever you wanted to do with it
    } 
});

Hope that helps!

edited Jul 26, 2012 at 15:04

answered Jul 26, 2012 at 14:57

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

froadie Over a year ago

Thanks! I was hoping to avoid a loop - but I guess a selector is in essence a loop anyway. This worked for me :)

Gino Pane Over a year ago

You can use filter() function with filtering by data-attributes after children() or find() selector functions

Will M. · Accepted Answer · 2015-06-02 20:52:22Z

9

Instead of

$(item).data('itemID', '123ABC456')

use

$(item).attr('data-itemID', '123ABC456')

Then you can use

$('[data-itemID=123ABC456]')

as a selector

edited Jun 2, 2015 at 20:52

Will M.

1,86417 silver badges28 bronze badges

answered Jun 2, 2015 at 20:14

Ethan Doh

5201 gold badge7 silver badges9 bronze badges

Comments

Barmar · Accepted Answer · 2012-07-26 16:46:04Z

0

How about putting the itemID in the DOM:

var item = $('<li itemID="'+itemid+">My Item Name</li>');

answered Jul 26, 2012 at 16:46

Barmar

789k57 gold badges555 silver badges669 bronze badges

1 Comment

froadie Over a year ago

I really don't want to have custom attributes. I thought of doing this with the "rel" attribute, but using data seemed more logical. I didn't realize that there was no easy selector, though...

Sergey Beloglazov · Accepted Answer · 2024-05-27 23:17:48Z

If you need to find the first occurrence and return its data, you can use a simple "for" loop:

function find(id) {
  let liList = $('li');
  // Use "for" loop instead of .each() for breaking the loop and returning the desired data
  for (let i = 0; i < liList.length; i++) {
    if ($(liList[i]).data('itemID') === id) {
      // Return the founded element
      return $(liList[i]);
    }
  }
  return null;
}

//Fill the list
let item = $('<li>Item #1</li>');
item.data('itemID', '1'); // Set ID=1
$('ul').append(item);
item = $('<li>Item #2</li>');
item.data('itemID', '5'); // Set ID=5
$('ul').append(item);
item = $('<li>Item #3</li>');
item.data('itemID', '10'); //Set ID=10
$('ul').append(item);

//Try to find an existing element
let item5=find('5');
document.write('Found item "'+item5.text()+'" has ID='+'5'+'<br>'); // Will show "Item #2"

//Try to find an element that doesn't exist
let item2=find('2');
document.write('Found item is "'+item2+'" when searching ID='+'2'+'<br>'); //null will be here

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul></ul>

Collectives™ on Stack Overflow

JQuery selector by data attribute when data is added dynamically?

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related