Question

I have this jquery code:

<script>
    $(function() {

        $( "#sortable" ).sortable({

            stop: function(event, ui) {
                var data = "";

                $("#sortable li").each(function(i, el) {
                        var p = $(el).text().toLowerCase().replace(" ", "_");
                        data += p + ",";
                });
                alert(data);

                $("form [name='new_order']").val(data);

        }

        });

        $( "#sortable" ).disableSelection();

    });

</script>

The code creates a sortable list. I want to capture the resorted order of the sortable list after a resort is finished. The LI’s are generated dynamically with PHP and look like:

echo '<li class="ui-state-default">';



echo '<table border="1" cellpadding="5" cellspacing="0" class="text2" align="center">';
echo '<tr>';
echo '<td align="right" width="10">' . ($counter+1) . '</td>';
echo '<td width="100"><img src="'.$thisimage['url'].'" alt="'. $thisimage['title'] .'" height="100" width="100" /><br />' . $thisimage['title'] . '</td>';
echo '</tr>';
echo '</table>';

echo '<input name="draglist_items['.$thisimage['image_no'].']" value="'.$counter++.'" type="hidden" />';



echo '</li>';

Currently, my ‘data’ variable contains output similar to: 1blablabla,2blablabla

I only want the value from the first TD element in each LI. Any idea what selector I might use in place of: $(el) to get this? Basically I would like 1,2,…

Answer 1

Not sure I understand the question (please use jsbin.com to post your complete code), but here it is (also, shorter, cleaner code):

     $("#sortable li").find('td:first').each(function() {
         data += $(this).text() + ",";
     });