jquery.data: How to store a data to an element and access it?

Question

How can I store a data to an element and then manipulate that check if it has the data?

For instance I have these two elements with the same class name.

<div class="elem"></div>
<div class="elem"></div>

jquery,

$(".elem:first").data("hasdata","popup");

if($(".elem").data("hasdata") === 'popup') $(".elem").css({background:'red'})

I get two red but I just want the first one to turn red. Is it possible?

my test on jsfiddle

Answer 1

You can use each to iterate over all elements with the class elem

$(".elem:first").data("hasdata","popup");
$(".elem").each(function(){
  if ($(this).data("hasdata") === 'popup'){
    $(this).css({background:'red'});
  }
});

check this jsFiddle

Answer 2

try this:

$(".elem:first").attr("data-hasdata","popup");

$(".elem[data-hasdata='popup']").css({background:'red'});

JSfiddle Demo

Answer 3

You can use filter() and put condition in it.

Live Demo

$(".elem:first").data("hasdata","popup");
$(".elem").filter(function(){
    return $(this).data("hasdata");
}).css({background:'red'});