Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS not responding to data-attribute set via jQuery

I am setting a data-position attribute on document ready via jQuery on several divs. The setting definitely works. For example, calling the below code in the Chrome console is returning 'left'.

$('.card-container').data('position');

However in the CSS the below is not doing anything.

[data-position='left']

Hard-coding data-position="left" in the div is working though. What am I doing wrong? Thanks for the help

like image 689
birnbaum Avatar asked Oct 15 '13 10:10

birnbaum


2 Answers

Setting a data attribute as you are means that it is stored in jQuery's cache (which is an object in memory), it does not get set as an attribute on the element and therefore no CSS selector will see it.

You would need to manually set the data attribute using attr for this to work:

$('.card-container').attr('data-position', 'left');

Note however, that this will see slightly reduced performance when retrieving the data value, although we're talking miliseconds.

like image 192
Rory McCrossan Avatar answered Oct 30 '22 13:10

Rory McCrossan


$('.card-container').attr('data-position',"set your value");

reference attr

like image 42
Rituraj ratan Avatar answered Oct 30 '22 12:10

Rituraj ratan