javascript - jQuery sortable 当排序元素的 id 按升序而不是排序顺序排序时

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");
});