javascript 循环通过 <li> 时出错答案

【问题标题】：Error with javascript Looping through <li>javascript 循环通过 <li> 时出错
【发布时间】：2011-02-06 18:04:07
【问题描述】：

我是编程新手，尤其是 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>

【问题讨论】：

标签： javascript asp.net vb.net jquery-ui jquery-ui-sortable

【解决方案1】：

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 中。

【讨论】：

【解决方案2】：

嗯，你可以使用 .get() 方法.. LINK

【讨论】：

【解决方案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 元素，对应于您的查询）。从中，您可以找到最接近的祖先是 'li' 元素，然后从中获取 'id' 属性。

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

【讨论】：