data attribute added trough jquery is not being available to select the element
<p>I have the following html code.</p>

<pre><code>&lt;ul&gt;
    &lt;li  data-details="li1"&gt;first&lt;/li&gt;
    &lt;li  &gt;second&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Notice that for the first element i have add <code>data-details</code>  attribute with a value.
For the 2nd <code>li</code> element i'm adding the same using jquery. Here is my JavaScript code.</p>

<pre><code>$(document).ready(function()
                  {
                      $("ul li:nth-child(2)").data("details","li2");
                      console.log($("ul li:nth-child(2)").data()); //data can be verified using this
                      alert($("ul li[data-details=li1]").length); //resulting in alert 1
                      alert($("ul li[data-details=li2]").length); //resulting in alert 0
                  });
</code></pre>

<p>The data is added we can verify by checking the console. However i'm not able to select the element based on value of <code>data-details</code>  which is being added by jquery. Why is it happening so ?</p>

<p>and Here is the <a href="http://jsfiddle.net/zTsS4/1/" rel="nofollow">jsfiddle link</a></p>
