javascript循环通过时出错<；李>；
我是编程新手，尤其是jQuery。我正在尝试使用jQueryUISortable列表对图像进行排序（排序）。我遇到的问题是，我不知道如何循环通过javascript循环通过时出错<；李>；,javascript,asp.net,vb.net,jquery-ui,jquery-ui-sortable,Javascript,Asp.net,Vb.net,Jquery Ui,Jquery Ui Sortable,我是编程新手，尤其是jQuery。我正在尝试使用jQueryUISortable列表对图像进行排序（排序）。我遇到的问题是，我不知道如何循环通过列表来获取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.
<!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>
$（函数（）{
//使李可敬
$（“#图像”）。可排序({
占位符：“空缺”，
更新：功能（e、ui）{
//创建变量
var orderArray=[]，wrap={}；
//重置“已保存”消息
$（“.success”，$（“#left”）.remove（）；
//处理每个图像
$（“#图像img”）。每个（功能（i）{
//构建img对象
var imgObj={
“id”：$find（“li”）.attr（“id”），
“订单”：i+1
};
//将对象添加到数组
orderArray.push（imgObj）；
});
//包裹对象
wrap.d=orderArray；
//传递到服务器
$.ajax({
类型：“POST”，
url:“WebService.asmx/updateOrder”，
数据：JSON.stringify（wrap），
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
如果（data.d==“已保存”）{
$（“”）.text（“新订单已保存！”）
.addClass（“success”）.appendTo（“左”）；
}否则{
$（“”）.text（“保存失败”）
.addClass（“失败”）。附录（“左”）；
}
}
});
}
});
});
图像组织者
通过将图像拖动到新位置来重新排序图像。您的更改将被删除
自动保存
$（函数（）{
$（“#图像”）。可排序({
占位符：“空缺”，
更新：功能（e、ui）{
//创建变量
var orderArray=[]，wrap={}；
$（“#图像li”）。每个（功能（i）{
//构建img对象
var imgObj={
“id”：这个，
“订单”：i+1
};
//将对象添加到数组
orderArray.push（imgObj）；
});
//循环当前对象，显示索引和id以显示顺序。
对于（var i=0；i变化
到
“each”中的“this”指的是当前元素（一个img元素，对应于您的查询）。从中，您可以找到最接近的祖先，即“li”元素，然后从中获得“id”属性
正如其他答案所示，我认为您的代码可以做得更好，但我相信这是您要求的解决方案
$(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);
}
}
});
});
var imgObj = {
"id": $find("li").attr("id"),
"order": i + 1
};
var imgObj = {
"id": $(this).closest("li").attr("id"),
"order": i + 1
};