如何获取（打印）元素相对于其父元素的索引

Question

我通过点击添加更多按钮在div内生成div，我想获取生成元素的索引，以便我可以打印div的名称“div-1”，“div-2”，....“div-n”当我删除div时，其中的div应取代 <div id="dataTable" class="master_table "> </div> <input type="button" value="Add More" class="addmore"/> <input type="hidden" id="rowCounter" value="0"/> 。

我的代码是

{{1}}

jsfiddle

Answer 1

在您的添加/删除功能中：

$(".master_table div").each(function(index){
    $(this).attr("name", "div_" + index)
});

修改

将您的js代码更改为：

$('.addmore').on('click', function() {
  $("#dataTable").append('<div class="wd_foutyeight_new"><span></span>'+
  '<br><label>Name</label><input type="text" name="textbox11[]" value=""/>'+
  '<label>Relation  </label><input type="text" name="textbox1[]" value=""/>'+
  '<a href="javascript:void(0)" class="remove_btn">Remove</a></div>');
  renumber();
});

$('#dataTable').on("click", ".remove_btn", function(){
  $(this).parent().remove();
  renumber();
});

function renumber() 
{
  $('#dataTable div span').each(function(index){
    $(this).text("Contact Detail " + (index + 1));
  });    
}

Answer 2

你可以这样做：

$('#dataTable > div').each(function(index){
   console.log("div-"+ index); // div-0,div-1
});