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

Question

我在容器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>

Answer 1

当你追加时，元素的索引长度比带有类节的总元素长。

<强> Live Demo

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

Answer 2

The problem is $(this).index('.container'), in your handler this refers to the button which is not a member of the .container selector so it will return -1

So one solution is to add a new div then find its index, I think you want the index based on the div's with class 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>

---

Or you can find the already existing number of elements with class section and use it as the index for the new 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>

Answer 3

$(this).index('.container')将尝试查找容器对象中单击按钮的索引。由于返回-1而不存在。

您需要在容器中使用容器中元素数量的长度作为索引值：

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

<强>演示：

＆＃13;

＆＃13;

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

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您只需获取容器的length children()，就像这样：

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

    $container.append(newDiv);
});