如何检查指定ID的li元素是否存在于对应ul列表中

核心问题分析 #

你写的代码不生效主要有两个原因：

1. 前端拖拽操作仅修改了浏览器端的DOM结构，不会自动同步到ASP.NET服务端的控件树，服务端的sortable1.Controls集合还是页面初始加载时的结构，和当前前端实际的DOM结构完全不对应
2. 你的遍历逻辑本身存在错误：你遍历sortable1下的每个子控件后，又去判断每个子控件的子控件是否包含LI1，多嵌套了一层判断，就算不考虑视图状态同步问题，逻辑也无法正常运行。

可行解决方案 #

方案1：纯前端验证（适合仅需要前端提示的场景，实现最简单）

直接在拖拽结束的回调事件里用JS判断目标元素是否在对应列表内即可：

// 绑定sortable的拖拽结束事件
$("#sortable1").sortable({
  connectWith: ".connectedSortable",
  stop: function() {
    if ($("#sortable1").find("#LI1").length > 0) {
      $("#lbTest").text("LI1在sortable1列表内");
    } else {
      $("#lbTest").text("LI1不在sortable1列表内");
    }
  }
});

方案2：后端验证（适合需要服务端拿到验证结果做后续业务处理的场景）

需要先把前端拖拽后的列表结构同步到后端，步骤如下：

1. 先在页面添加一个服务端隐藏域，用于存储列表的元素ID：

<asp:HiddenField ID="hfSortable1Ids" runat="server" />

2. 前端拖拽结束后把当前列表所有li的ID同步到隐藏域：

$("#sortable1").sortable({
  connectWith: ".connectedSortable",
  stop: function() {
    // 收集当前sortable1下所有li的ID，用逗号分隔后存入隐藏域
    var ids = $("#sortable1 li").map(function() { return this.id; }).get().join(",");
    $("#<%= hfSortable1Ids.ClientID %>").val(ids);
  }
});

3. 后端直接读取隐藏域的值判断即可：

// 对应提交按钮的点击事件或者其他后端触发逻辑
protected void btnSubmit_Click(object sender, EventArgs e)
{
    if (hfSortable1Ids.Value.Split(',').Contains("LI1"))
    {
        lbTest.Text = "LI1在sortable1列表内";
    }
    else
    {
        lbTest.Text = "LI1不在sortable1列表内";
    }
}

如果你只是需要在页面初始加载阶段判断初始结构中是否包含对应li，不需要考虑拖拽后的结果，直接用简化后的逻辑即可，不需要遍历：

if (sortable1.Controls.Contains(LI1))
{
    lbTest.Text = "LI1在sortable1列表内";
}
else
{
    lbTest.Text = "LI1不在sortable1列表内";
}

内容的提问来源于stack exchange，提问作者Gareth