Question

I am trying to use data() for the first time. I have a list. I want to attach info to the li elements

My html is basic. I am not using ids for anything but the div container. This is done to allow multiple ul on the page without having id conflicts.

html

 <div id="container">
    <ul> 
        <li><input type="checkbox"></input><label>Radio</label></li>
        <li><input type="checkbox"></input><label>Cable</label></li>
    </ul>
 </div>

In my jquery I want to find the li elements of the container and attach a name corresponding to the text.

//BaseElement is my div
$(this.BaseElement).find('li').each(function () {
     var key = $(this).text();
     if (key == "Radio")
         $(this).data({ 'name' : 'Radio' });
     if (key == "Cable")
         $(this).data({ 'name' : 'Cable' });
});

I am firing a function base off checkbox selection or label click. This may not be the most efficient way of doing that but it works (not the data part but the function firing)

$(this).find('li input[type="checkbox"]').change(function () {
     $.data($(this).parent().get('name'));
 });

$(this).find('li lable').click(function () {
     $.data($(this).parent().get('name'));
});

There is more going on with the jquery in the page then this code, but this should be all that’s necessary to see what is occurring.

Answer 1

get is a jQuery AJAX method. You should replace get by data:

$(this).find('li input[type="checkbox"]').change(function () {
     $.data($(this).parent().data('name'));
 });

$(this).find('li lable').click(function () {
     $.data($(this).parent().data('name'));
});