How to select a div on data attribute with data from localstorage

Question

i have some data in my localStorage like this:

test="[[bla/bla,Bla BLa],[bla1/bla1,Bla1 BLa1]]"

And i have an div with list items (10 list-items) like this

<li data-1="Bla BLa" data-2="bla/bla"></li>
<li data-1="Bla1 BLa1" data-2="bla1/bla1"></li>
<li data-1="Bla2 BLa2" data-2="bla2/bla2"></li>

Now i need to add a border to the list items that have the same data attribute as the value that is stored in the localStorage, in this case the first two.

How can i do this? I am stuck on this one.

Thank you very much

Loops! Use an `each` statement on the `li` attributes, then a `for` over your array of values and check the data attributes, if match, use `addClass` — tymeJV, Nov 01 '13 at 13:11
http://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute — VoronoiPotato, Nov 01 '13 at 13:12
Ok i now have an array with values from the list items and from the localstorage. How can i match these? — FvO, Nov 01 '13 at 13:16

score 1 · Accepted Answer · answered Nov 01 '13 at 13:38

Assuming you always have the same format of test string in localStorage you can parse it directly to css selector http://api.jquery.com/multiple-attribute-selector/

var test="[[bla/bla,Bla BLa],[bla1/bla1,Bla1 BLa1]]", //That comes from storage

    selector = test.substr(2, test.length - 4) //trim [[ ]]
                   .split("],[") //convert to array
                   .map(function(item) { //Convert each pair to a selector
                        item = item.split(",");
                        return "[data-1='" + item[1] + "'][data-2='" + item[0] + "']";
                   }).join(","); //Concat

 var items = $(selector, "#container"); //have fun

http://jsfiddle.net/LNkJB/

How to select a div on data attribute with data from localstorage

1 Answers1