Question

我是编程特别是jQuery的新手。我正在尝试使用jQuery UI可排序列表对图像进行排序（排序）。我遇到的问题是我不知道如何遍历<li>列表来获取id。

以下是.aspx页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="sortable/image_organiser.css" rel="stylesheet" type="text/css" />
    <script src="sortable/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="sortable/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //make li sortable
            $("#images").sortable({
                placeholder: "vacant",
                update: function (e, ui) {

                    //create vars
                    var orderArray = [], wrap = {};

                    //reset 'saved' message
                    $(".success", $("#left")).remove();

                    //process each image
                    $("#images img").each(function (i) {

                        //build img object
                        var imgObj = {
                            "id": $find("li").attr("id"),
                            "order": i + 1
                        };

                        //add object to array
                        orderArray.push(imgObj);
                    });

                    //wrap in object
                    wrap.d = orderArray;

                    //pass to server
                    $.ajax({
                        type: "POST",
                        url: "WebService.asmx/updateOrder",
                        data: JSON.stringify(wrap),
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data.d === "saved") {
                                $("<p>").text("New order saved!")
                .addClass("success").appendTo("#left");
                            } else {
                                $("<p>").text("Save failed")
                .addClass("failure").appendTo("#left");
                            }
                        }
                    });

                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="outerWrap">
            <div id="left">
                <h1>
                    Image Organiser</h1>
                <p>
                    Re-order the images by dragging an image to a new location. Your changes will be
                    saved automatically.</p>
            </div>
            <div id="images">

                        <li id="1">
                            <img src="uploads/champions-of-t20.JPG" alt=""
                                class="image_resize" />
                        </li>

                        <li id="2">
                            <img src="uploads/08012011079.JPG" alt=""
                                class="image_resize" />
                        </li>

                        <li id="3">
                            <img src="uploads/CIMG1443.JPG" alt=""
                                class="image_resize" />
                        </li>

                        <li id="4">
                            <img src="uploads/CIMG1455.JPG" alt=""
                                class="image_resize" />
                        </li>

                        <li id="5">
                            <img src="uploads/CIMG1450.JPG" alt=""
                                class="image_resize" />
                        </li>

                        <li id="6">
                            <img src="uploads/Cricket_2010.jpg" alt=""
                                class="image_resize" />
                        </li>

            </div>
        </div>
    </div>
    </form>
</body>
</html>

Answer 1

嗯，您可以使用.get（）方法.. LINK

Answer 2

http://jsfiddle.net/nqGzZ/3/

 $(function () {
     $("#images").sortable({
            placeholder: "vacant",
            update: function (e, ui) {

                //create vars
                var orderArray = [], wrap = {};

                $("#images li").each(function(i){

                    //build img object
                    var imgObj = {
                        "id": this.id,
                        "order": i + 1
                    };

                    //add object to array
                    orderArray.push(imgObj);
                });

                // Loops through the current object, shows the index# and the id# to show the order.
                for(var i=0; i<orderArray.length;i++){
                    alert( "Index : " + i + " ID : " + orderArray[i].id);  
                }

            }
  });
 });

按照它们出现的顺序返回id。另外，我建议将li包装在UL或OL中。

Answer 3

更改

   var imgObj = {
       "id": $find("li").attr("id"),
       "order": i + 1
   };

到

   var imgObj = {
       "id": $(this).closest("li").attr("id"),
       "order": i + 1
   };

'each'中的'this'指的是当前元素（img-element，对应于你的查询）。从这里，您可以找到最接近祖先的'li'元素，然后从中获取'id'属性。

我认为你的代码可以做得更好，正如其他答案所示，但我相信这是你要求的解决方案。

javascript循环错误<li> </li>

3 个答案: