單擊“單擊我！”后，我想回傳數字元素串列 只有jQuery。
例如，以下值：
55.5
456.5
.54
32.2
應該：
.54
32.2
55.5
456.5
代碼：
$(function() {
$('.btn').on('click', function() {
$('input').keyup(function() {
var start = $(this).index('input');
var target = $(this).val() - 1;
if (target < start) $(this).parent().insertBefore($('li').eq($(this).val() - 1));
if (target > start) $(this).parent().insertAfter($('li').eq($(this).val() - 1));
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ItemList">
<li>some number 1
<input id="Text1" type="number" value="32.2" />
</li>
<li>some number 2
<input id="Text2" type="number" value="456.5" />
</li>
<li>some number 3
<input id="Text3" type="number" value="55.5" />
</li>
<li>some number 4
<input id="Text4" type="number" value=".54" />
</li>
</ul>
<button class='btn'>
Click me!
</button>但是，不行。我設法讓它作業，但該功能只識別第一個數字。其他她無視。
uj5u.com熱心網友回復：
如果您想使用“li”中的輸入值重新排序串列，您可以嘗試這樣：（檢查小提琴：https ://jsfiddle.net/v1oskqg0/ ）
$(".btn").on("click", function() {
$("#ItemList li").each(function(index) {
var input_value = $(this).find('input').val();
$(this).data('order', input_value);
})
$("#ItemList li")
.sort((a,b) => $(a).data("order") - $(b).data("order"))
.appendTo("#ItemList");
});
首先，我將輸入欄位中的值存盤到 li 元素的資料屬性中，然后在 btn click 上對元素進行排序。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/439721.html
標籤：javascript html jQuery
上一篇：如果添加新資料mysql播放音頻