Get/Set info to html with data() jquery
<p>I am trying to use data() for the first time. I have a list. I want to attach info to the li elements</p>

<p>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.</p>

<p>html</p>

<pre><code> &lt;div id="container"&gt;
    &lt;ul&gt; 
        &lt;li&gt;&lt;input type="checkbox"&gt;&lt;/input&gt;&lt;label&gt;Radio&lt;/label&gt;&lt;/li&gt;
        &lt;li&gt;&lt;input type="checkbox"&gt;&lt;/input&gt;&lt;label&gt;Cable&lt;/label&gt;&lt;/li&gt;
    &lt;/ul&gt;
 &lt;/div&gt;
</code></pre>

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

<pre><code>//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' });
});
</code></pre>

<p>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) </p>

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

$(this).find('li lable').click(function () {
     $.data($(this).parent().get('name'));
});
</code></pre>

<p>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. </p>
