Jquery：获取另一个div中动态添加的div的索引？答案

【问题标题】：Jquery: Get index of dynamically added div within another div?Jquery：获取另一个div中动态添加的div的索引？
【发布时间】：2015-08-10 20:50:06
【问题描述】：

我在容器 div 中添加 div。我想在左侧显示子 div 的索引。我怎样才能做到这一点？

$('#btn').on('click', function() {
  $('#container').append('<div class="section">' + $(this).index('.container') + ' B</div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">

  <div class="section">A</div>
  <div class="section">B</div>

</div>

<button id="btn">Click Me!</button>

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

问题是$(this).index('.container')，在您的处理程序中this 指的是不是.container 选择器成员的按钮，因此它将返回-1

所以一个解决方案是添加一个新的div 然后找到它的索引，我想你想要基于 div 类的索引section

$('#btn').on('click', function() {
  $('<div />', {
    "class": 'section'
  }).appendTo('#container').html(function() {
    return $(this).index('.section') + ' B'
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">

  <div class="section">A</div>
  <div class="section">B</div>

</div>

<button id="btn">Click Me!</button>

或者您可以找到已经存在的类 section 的元素数量并将其用作新 elemnet 的索引

$('#btn').on('click', function() {
  $('#container').append('<div class="section">' + $('#container .section').length + ' B</div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="section">A</div>
  <div class="section">B</div>
</div>
<button id="btn">Click Me!</button>

【讨论】：

【解决方案2】：

当您添加元素时，索引的长度将比具有类部分的总元素长一倍。

Live Demo

$('#btn').on('click', function() {
   index = $('#container > .section').length - 1
   $('#container').append('<div class="section">' +index  + ' B</div>');    
});

【讨论】：

【解决方案3】：

您可以只获取容器的children() 的length，如下所示：

$('#btn').on('click', function() {
    var $container = $('#container');
    var newDiv = '<div class="section">' + $container.children().length  + ' B</div>';

    $container.append(newDiv);
});

【讨论】：

【解决方案4】：

$(this).index('.container') 将尝试在容器对象中查找单击按钮的索引。哪个不存在，因为它返回-1。

这里需要使用容器中元素个数的长度作为索引值：

 $('#container > .section').length;

演示：

$('#btn').on('click', function() {
  $('#container').append('<div class="section">' + $('#container > .section').length + ' B</div>');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">

  <div class="section">A</div>
  <div class="section">B</div>

</div>

<button id="btn">Click Me!</button>

【讨论】：