Question

All,
I’ve got the following PHP code:

$qry = "Select * from uploaded_files where user_id='$_SESSION[oml_user_id]' and upload_type='video_montage' order by sort ASC";
$result = mysql_query($qry);
$resultrows = mysql_num_rows($result);
if($resultrows>0){
?>
<ul class="gallery" id="video_gallery">
<?php
while($resultset = mysql_fetch_array($result)){
?>
<li id="<?php echo $resultset['file_id']; ?>"><a href="../upload/<?php echo $resultset['filename']; ?>"><img src="../upload/thumbnails/<?php echo $resultset['filename']; ?>" width="116" height="116" alt=""></a></li>
<?php
}
?>
</ul>
<button id="save_info">Save</button>

What I’d like to happen is when I click the save_info button I’d like to determine the current order of the li and the corresponding IDs of them that are associated with the ul. I’d like to then be able to just the .post function to submit them to a function to save these values to my database.

How can I determine the current order and IDs of the lis on my page?

Thanks in advance!

Answer 1

Well $("#video_gallery li") will give you a jQuery object containing all the li elements in their current order. You can then loop through them with .each() and extract the ids:

$("#save_info").click(function() {    
    var ids = [];
    $("#video_gallery li").each(function() {
        ids.push(this.id);
    });

    // do something with the ids, for example:
    $.post("test.php", { 'file_ids[]': ids });   
});

Demo: http://jsfiddle.net/5f4kr/

(Alternatively you could use various other jQuery methods, e.g., $.map(), but the above is simple.)