jQuery - loop through ol with li containing tables, and get data from table columns
<p>I have an unordered list (ul) whose list item (li) elements each contain a table with 2 columns (first column is a delete button (attribute 'data-id' contains the id of the data), second column is the data text). I need to get the values inside the table of each li and add the values to a hidden field for processing on the server. How would I go about retrieving the values from the table inside the li. I know how to loop through the ul itself and pull out each li...</p>

<pre><code>$('#ol li').each(function (i, li) {
    var listItem = li;
    // Get data from table within li here
});
</code></pre>

<p>but I am not sure how to proceed after this step. Thank you for any help.</p>

<p>EDIT</p>

<p>Here is an example of what gets appended to the ol.</p>

<pre><code>$('#ol').append("&lt;li&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style='padding-right:16px'&gt;&lt;button type='button' class='btn btn-danger remove' data-id='" + item.val() + "'&gt;&lt;b&gt;X&lt;/b&gt;&lt;/button&gt;&lt;/td&gt;&lt;td&gt;" + txt + "&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/li&gt;");
</code></pre>

<p>SOLUTION</p>

<p>Using find() I was able to locate the desired elements and extract the values. </p>

<pre><code>$('#ol li').each(function () {

        var id = $(this).find('td').first().find('button').attr('data-id');

        if(id == -1)
        {
            var txt = $(this).find('td').last().text();

            $('#hf').val($('#hf').val() + txt + "|");
        }
        else
        {
            $('#hf').val($('#hf').val() + id + "|");
        }

    });
</code></pre>

<p>Thank you to those who assisted.</p>