How do I loop through table elements AND retrieve data elements using JQuery?
<p>I have an html table that looks like this in a standard HTML 4.01 Transitional page:</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Col 1&lt;/th&gt;
      &lt;th&gt;Col 2&lt;/th&gt;
      &lt;th&gt;etc...&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody id="tableBodyID"&gt;
    &lt;tr class="rowElement" data-element="some-data-here"&gt;
      &lt;td&gt;Some Table Data&lt;/td&gt;
      &lt;td&gt;Some More Table data&lt;/td&gt;
      &lt;td&gt;etc.&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class="rowElement" data-element="some-data-here"&gt;
      &lt;td&gt;Some Table Data&lt;/td&gt;
      &lt;td&gt;Some More Table data&lt;/td&gt;
      &lt;td&gt;etc.&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>I want to loop through all the rows and get the "data" in the data-element field and place it in a variable using JQuery.  I have tried a number of variations of .children(), .data(), and .each() but have not been able to retrieve the "data" elements.</p>

<p>I have tried (inside a $(document).ready() block...):</p>

<pre><code>$('tbody &gt; tr').each(function() {
  alert( $(this).data('element'));  // CORRECTION - this works.
});

$('tbody').children().each(function() {
  alert( $(this).data('element'));  // CORRECTION - this works
});

$('.rowElement').each(function(i, obj) {
  rowValue = $(this);
  alert(rowValue.data('element'));  // CORRECTION - this works
});
</code></pre>

<p>Any help is welcome. I am using HTML 4.01, and JQuery 1.7.1.  I have been testing in Firefox, but need to support the other standard browser Firefox, Opera, Safari, Chrome, and IE8+.</p>

<p>(Edited for minor syntax changes)</p>

<p>The actual problem was a case issue, please see comment below.  Issue RESOLVED.</p>
