如何使用jQuery获取每个元素的索引号

Question

我正在使用可排序的jquery对一些元素进行排序，但是现在我希望能够对其进行排序并将其保存到数据库中。

所以我想最好的方法是获取元素的索引。

这是我的html（它是动态的，因此可以有无限的类别和问题）：

<form id="lijstform">
    <div class="row">
        <div class="col-md-8">
            <label class="lijstnaamtitle">Lijst naam</label>
            <input class="form-control name_list catinput lijsttitle" type="text" name="lijsttitle">
        </div>
    </div>
    <div id="dynamic_field" class="ui-sortable">
        <div class="row sortwrap ui-sortable-handle" 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 class="row sortwrap ui-sortable-handle" id="2">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="2. 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">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap" id="3">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="3. 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">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
        <div class="row sortwrap" id="4">
            <div class="col-md-8">
                <input type="text" name="category[]" placeholder="4. 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">
                <button id="addcategory" class="btn btn-danger btn_remove removebutton">X</button>
            </div>
        </div>
    </div>
</form>

我已经有将数字添加到输入字段的占位符的代码。

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);
  });
  df.find('.catinput').each(function(i) {
    var index = $(this).index();
    $(this).val(i + 1 + '.' + ' '+index);
  });
  df.find('.questionlist').each(function() {
    $(this).find('input[name^=qu]').each(function(i) {
      $(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
    });
  });
}

每次添加或删除时，我都会再次调用该函数以更新数字：

$('#dynamic_field').on('click', '.btn_remove', function() {
  $(this).closest('.row').remove();
  updatePlaceholders();
});
$('#addcategory').on('click', function() {
let t = $(template)
  $('#dynamic_field').append(t);
  updatePlaceholders();
});

这是我尝试获取索引的方法：

df.find('.catinput').each(function(i) {
        var index = $(this).index();
        $(this).val(i + 1 + '.' + ' '+index);
      });

但这将所有索引显示为0，即使添加了新的输入字段也是如此。 我如何使它工作？

Answer 1

从jQuery文档来看：

如果没有参数传递给.index（）方法，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置 。

每个catinput类都位于不同的div中，因此它们不是同级 。 这就是.index()每个返回0的原因。

如果想要集合中该元素的索引，为什么不使用已定义的i参数呢？ 由于.each()回调的第一个参数是该元素的索引（ docs ）。

即

df.find('.catinput').each(function(i) {
  var index = i;
  //rest of logic
});