在我下面的代碼中，只有第一個#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"
});
但偷不作業
js小提琴; https://jsfiddle.net/seamqykd/1/
uj5u.com熱心網友回復：
您不能為多個專案分配相同的 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"
});
uj5u.com熱心網友回復：
首先在多個元素中使用 id 是一個 html 語意錯誤，Id 用于在一個且只有一個 html 元素中，
這就是導致問題的原因，只需將您的 html 中id的class名稱替換為您的名稱，并在您的 js 代碼中替換#sort-item為.sort-item 參見下面的作業片段：
$('#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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/394555.html
標籤：javascript 查询 jquery-ui jquery-ui-sortable
上一篇：Vue從父級系結子組件資料