当元素的排序id按升序而不是按排序顺序排序时，jQuery是可排序的

Question

我有一些代码来对一些元素(输入字段(进行排序，并希望将排序顺序存储在我的数据库中。在检查元素时，排序是有效的，id会按正确的顺序显示，但当我添加新的输入字段时，所有id都会更新并按升序排列，而不是在添加新输入之前按顺序排列。

示例：

我添加了三个字段，它们像：

1
2
3

我把3拖到第一个位置，所以我有：

3
1
2

但后来我添加了一个新字段，订单更改为：

1
2
3
4

代替

3
1
2
4

这是我目前的HTML：

<button id="addcategory" class="btn btn-success btn-lg waves-effect btnadd">Extra categorie</button>
<form id="lijstform">
<div class="row">
<div class="col-md-8">
<label class="lijstnaamtitle">Lijst naam</label>
<label class="displaynonecoid" id="coid"><?PHP echo $getbedrijfinfo['id']; ?></label>
<input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
</div>
</div>
<div id="dynamic_field">
<div class="row sortwrap" id="1">
<div class="col-md-8">
<input type="text" name="category[]" placeholder="1. Voeg een categorie toe" class="form-control name_list catinput" />
<i class="mdi mdi-sort dragndrop"></i>
<div class="questionlist questionwrap">
<div class="row">
<div class="col-md-8">
<button class="btn btn-success questionbutton">Extra vraag</button>
<input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</form>
<div class="lijstresult">
</div>
<div class="row">
<div class="col-md-8">
<button class="btn btn-success inspectiebutton lijstbutton">Opslaan</button>
</div>
</div>

这是我的jquery代码，用于排序字段、添加新字段和更新ids:

// HTML template for new fields
const template =
'<div class="row sortwrap">'+
'  <div class="col-md-8">'+
'    <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />'+
'    <i class="mdi mdi-sort dragndrop"></i>'+
'    <div class="questionlist questionwrap">'+
'      <div class="row">'+
'        <div class="col-md-8">'+
'          <button class="btn btn-success questionbutton">Extra vraag</button>'+
'          <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />'+
'        </div>'+
'        <div class="col-md-4">'+
'        </div>'+
'      </div>'+
'      </div>'+
'    </div>'+
'    <div class="col-md-4"> '+
'    <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>'+
'  </div> '+
'</div>';
const vraagTemplate =
'<div class="row" id="question">' +
'  <div class="col-md-8">' +
'    <input type="text" name="question[]" class="form-control name_list questioninput" />' +
'  </div>' +
'  <div class="col-md-4">' +
'    <button class="btn btn-danger btn_remove">X</button>' +
'  </div>' +
'</div>';
// Count numbers and change accordingly when field is deleted
function updatePlaceholders() {
$('#input-field-id').val($('#input-field-id').val() + 'more text');
// Sortable code
let df = $('#dynamic_field');
df.find('input[name^=cat]').each(function(i) {
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
});
df.find('.sortwrap').each(function(i) {
$(this).attr("id", i + 1 + "-order");
});
df.find('.questionlist').each(function() {
$(this).find('input[name^=qu]').each(function(i) {
$(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
});
});
}
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function() {
let $ql = $(this).closest('.questionlist');
$ql.append($(vraagTemplate));
updatePlaceholders();
});
// Delete
$('#dynamic_field').on('click', '.btn_remove', function() {
$(this).closest('.row').remove();
updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
$('#dynamic_field').append(t);
updatePlaceholders();
});
$(function() {
$('#addcategory').trigger('click');
$('#question').sortable({
connectWith: '#question'
});
$('#dynamic_field').sortable({
cancel: '.questionwrap, input',
placeholder: "ui-state-highlight"
});
});

这就是我所说的id：

df.find('.sortwrap').each(function(i) {
$(this).attr("id", i + 1 + "-order");
});

Answer 1

如果id和placeholder不存在，请尝试设置。

df.find('input[name^=cat]').each(function(i) {
if (!this.placeholder)
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
});
df.find('.sortwrap').each(function(i) {
if (!this.id)
$(this).attr("id", i + 1 + "-order");
});