注意:请勿将 jQuery Sortable 与 jQuery UI Sortable
混淆
我在页面上每<li>
<ul>
<li>
<div id="cmd_container">
<button class="w3-btn w3-blue" onclick="inclib()">Comando de linha única</button>
<button class="w3-btn w3-blue" onclick="conditional()">Comando de multiplas linhas</button>
<button class="w3-btn w3-light-grey" onclick="serialize()">Serializar lista</button>
</div>
<!-- The list -->
<p>Código padrão:</p>
<ul id="lista"></ul>
使用$("#lista").sortable();
function serialize() {
console.clear();
$.each($("li"), function() {
console.log($(this).text());
});
}
// SINGLE LINE COMMAND (DEMO 1)
function inclib() {
var biblioteca = prompt("Digite o nome da biblioteca:");
if (biblioteca == "" || biblioteca == null) {
alert("Digite o nome do comando!");
} else {
var html = "" +
"<li>" + biblioteca + "</li>\n"
$("#lista").append(html);
}
}
// MULTIPLE LINES COMMAND (DEMO 2)
function conditional() {
var condicional = prompt("Digite a expressão conditional:");
if (condicional == "" || condicional == null) {
alert("Digite o nome do comando!");
} else {
var html = "" +
"<li>" +
condicional + " {\n" +
"<ul></ul>" +
"\n}" +
"</li>"
$("#lista").append(html);
}
}
,但当我重新排列Slideshow
时,控制台显示元素两次
jQuery Sortable 一切都还可以!
Image
Image
PS:我已经在原始代码中包含了所有必要的库:
- jQuery 3.3.1
- jQuery Sortable
答案 0 :(得分:1)
问题是您尝试获取文档中的所有li项目,如果您使用inclib
添加两个文本:Command 1
和Command 2
,那么您将拥有以下HTML :
<ul id="lista">
<li>Command 1<li>
<li>Command 2</li>
</ul>
您使用conditional
添加了另一个文本:Command 3
然后您将拥有以下HTML:
<ul id="lista">
<li>Command 1<li>
<li>Command 2</li>
<li>Command 3 {
<ul></li>
}
</li>
</ul>
如果您在Command 1
内移动Command 2
或Command 3
,那么您将拥有以下html:
<ul id="lista">
<li>Command 2</li>
<li>Command 3 {
<ul>
<li>Command 1<li>
</li>
}
</li>
</ul>
当您使用$("li")
选择文档中的所有li项目时,您将获得3个项目,但是(在我描述的情况下)具有嵌套ul的项目将返回其所有内容(包括内容)如果你使用jQuery .text()
函数得到它的文本,那么你将获得以下输出:
Command 2
Command 3 {
Command 1
}
Command 1
因此,如果您想获得可排序ul的文本表示,您应该只使用以下选择器获取第一级li项:#lista > li
。
检查我的工作示例。希望它有所帮助。
function serialize() {
console.clear();
$.each($("#lista > li"), function() {
console.log($(this).text());
});
var data = $('#lista').sortable("serialize").get();
console.log(JSON.stringify(data, null, ' '));
}
// SINGLE LINE COMMAND (DEMO 1)
function inclib() {
var biblioteca = prompt("Digite o nome da biblioteca:");
if (biblioteca == "" || biblioteca == null) {
alert("Digite o nome do comando!");
} else {
var html = "" +
"<li>" + biblioteca + "</li>\n"
$("#lista").append(html);
}
$('#lista').sortable();
}
// MULTIPLE LINES COMMAND (DEMO 2)
function conditional() {
var condicional = prompt("Digite a expressão conditional:");
if (condicional == "" || condicional == null) {
alert("Digite o nome do comando!");
} else {
var html = "" +
"<li>" +
condicional + " {\n" +
"<ul></ul>" +
"\n}" +
"</li>"
$("#lista").append(html);
}
$('#lista').sortable();
}
$(document).ready(function() {
$("#lista").sortable();
});
<div id="cmd_container">
<button class="w3-btn w3-blue" onclick="inclib()">Comando de linha única</button>
<button class="w3-btn w3-blue" onclick="conditional()">Comando de multiplas linhas</button>
<button class="w3-btn w3-light-grey" onclick="serialize()">Serializar lista</button>
</div>
<p>Código padrão:</p>
<ul id="lista"></ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>
修改根据docs,您应该使用以下代码获取可排序的序列化版本:$("#lista").sortable("serialize")
(我在代码段中添加了一个示例)。