Question

我似乎无法解决这个问题并且已经查看了之前的一些问题。

这是一个非常简单的问题，但似乎无法得到结果。我有一个Div元素，我动态地追加一个元素。当用户单击其中一个元素时，我希望它是根据该div元素的索引。到目前为止，我还没有成功，我不明白为什么。

代码到目前为止

HTML

 <li class = "has-dropdown">
    <li class = "dropdown">
    <a href="#" class="dropbtn">Chains</a>
        <ul class="dropdown">
            <div class = "dropdown-content" id = "chainNav">
             </div>
        </ul>
     </li>
</li>

THE JS

for (var i = 0; i < chainList.length; ++i) {
    var a = document.createElement('a');
    var chainNav = document.getElementById("chainNav");
    a.textContent = chainList[i];
    chainNav.appendChild(a);
  }

$('a', $('#chainNav')).click( function() {
    var index = $(this).closest('div').index();
    alert(index);
} );

链表是动态创建的，通常包含一些像这样的任意字母

chainList = [A, E, F, I, D, G];

代码运行并生成一个元素。我只需要每个索引。

Answer 1

使用on委派事件进行点击工作，因为您要动态地向DOM添加元素

＆＃13;

chainList = ['A', 'E', 'F', 'I', 'D', 'G'];
for (var i = 0; i < chainList.length; ++i) {
    var a = document.createElement('a');
    var chainNav = document.getElementById("chainNav");
    a.textContent = chainList[i];
    chainNav.appendChild(a);
  }
$('#chainNav').on('click','a',function() {
       var index = $(this).index();
       alert(index);
      });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <li class = "has-dropdown">
    <li class = "dropdown">
    <a href="#" class="dropbtn">Chains</a>
        <ul class="dropdown">
            <div class = "dropdown-content" id = "chainNav">
             </div>
        </ul>
     </li>
</li>

＆＃13;

Answer 2

 $('#chainNav').on('click','a',function() {
   var index = ($('#chainNav a').index($(this))) + 1;  
   alert (index);
}

修复它并返回div元素中我需要的数字。

元素的索引

2 个答案: