Question

在我的代码中，我正在动态创建无序列表项。每个包含一个文本和一个锚标记（红十字标记）。现在我想要的是，在点击锚标签时，它会打印出它所在的列表项的子编号。我想要这个而不重新加载页面。

 if (status === 'success') {
     const i = document.createElement("i");
     i.classList.add("fa");
     i.classList.add("fa-times");
     i.classList.add('red-cross');

     const a = document.createElement("a");
     a.classList.add("ml-4");
     a.append(i);

     const t = document.createTextNode(txt)

     const newItem = document.createElement("li");
     newItem.append(t);
     newItem.append(a);

     $("ul#"+list).append(newItem).on('click', 'li a', function() {
         const cnt =  $("ul#"+list).children().length;
         console.log(cnt);
     }); }

查看： Unordered list of items with text and cross sign

预期产量：点击第i个十字标志后，输出应为i。

当前输出：无论我点击哪个数字，输出始终为6。

Answer 1

点击链接后才会运行点击功能。因此，在您点击之前不会计算const cnt = $("ul#"+list).children().length;，我猜您的所有项目都已添加到该点，因此所有项目的结果都为6。

要使用该方法，您必须在创建函数时调用计算：

$("ul#"+list).append(newItem).on('click', 'li a', (function() {
    const cnt =  $("ul#"+list).children().length;

    return function () {
        console.log(cnt);
    }
}()));

这不是一个好的解决方案，因为您为每个添加的项添加了一个新的事件监听器。你可能更喜欢这样的东西：

var list = $("ul#test");
list.on('click', 'li a', function () {
    var idx = list.children().index($(this).closest('li'));
  console.log(idx);
});

必须只进行一次，然后使用以下内容添加新项目：

$("ul#test").append(newItem);

Answer 2

预期输出：点击我的十字标志输出应该是我。

当前输出：无论我点击哪个数字，输出始终为6。

如果点击我 -th li应输出 n （<{em> n 的<{1}}索引 n （li的总数）然后你应该做类似的事情

li

这会检查所点击的a所处的位置 - 并且由于每个const children = $("ul#"+list + " li a").children(); const i = children.index(this) + 1 // +1 to count from 1 console.log(i);只有一个<i>，因此计数相同。

onclick在追加后无法正常工作

2 个答案: