Jquery Ui 可排序项目选项仅选择第一项答案

【问题标题】：Jquery Ui sortable items option select just first itemJquery Ui 可排序项目选项仅选择第一项
【发布时间】：2021-12-27 09:43:31
【问题描述】：

在我下面的代码中，只有第一个 #sort-item 是可排序的，其他的则不是。我该如何解决？

$('#sortable').sortable({
   items:"#sort-item"
});

HTML;

<ul id="sortable">
    <li id="sort-item"></li>
    <li id="sort-item"></li>
    <li id="sort-item"></li>
    <li id="sort-item"></li>
    <li id="sort-item"></li>
</ul>

编辑：我试试；

$('#sortable').sortable({
   items:"> #sort-item"
});

但是偷不工作

jsFiddle; https://jsfiddle.net/seamqykd/1/

【问题讨论】：

你能生成示例吗：jsfiddle.net/a70qkb95
items:"#sort-item" 这仅适用于第一条记录，您需要给出类而不是 ID("#sort-item")。
@KHIMAJIVALUKIYA 我使用类和求解器谢谢你的帮助

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

您不能为多个项目分配相同的 ID (https://www.w3schools.com/html/html_id.asp)

使用类来选择项目：

<ul id="sortable">
    <li class="sort-item"></li>
    <li class="sort-item"></li>
    <li class="sort-item"></li>
    <li class="sort-item"></li>
    <li class="sort-item"></li>
</ul>

$('#sortable').sortable({
  items:".sort-item"
});

或者更好的是，使用元素

$('#sortable').sortable({
  items:"li"
});

【讨论】：

【解决方案2】：

首先在多个元素中使用 id 是一个 html 语义错误，id 用于在一个且只有一个 html 元素中，

这就是导致问题的原因，只需在 html 中将您的 id 替换为 class 名称，并在您的 js 代码中将 #sort-item 替换为 .sort-item，请参见下面的工作 sn-p：

$('#sortable').sortable({
  items:".sort-item"
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul id="sortable">
    <li class="sort-item">aaa</li>
    <li class="sort-item">bbb</li>
    <li class="sort-item">ccc</li>
    <li class="sort-item">ddd</li>
    <li class="sort-item">eee</li>
</ul>

【讨论】：