需要使用 Javascript 在 html 中获取列表项的索引

Question

在 Todo 列表 Web 应用程序中，我使用 EJS 将项目添加到 <ul> 列表。

使用 javascript 我希望能够在单击时检索列表项的索引以控制其 CSS

或者在我的项目数组toDoArray中删除它存储在节点的后端。

<ul>
    <% for( var i = 0; i < toDoArray.length ; i++) { %>
    <li class="listItem"> <%= toDoArray[i] %> </li> 
    <% } %>
</ul>

谢谢

Answer 1

您可以在点击事件中获取父节点，然后获取其所有子节点，然后在该列表中搜索与点击的元素（事件的目标）相匹配的节点。

addEventListener( 'click', event => {
    const li = event.target;
    if (li.tagName.toLowerCase() !== 'li') return;
    const lis = Array.from(li.parentNode.children);
    const index = lis.indexOf(li);
    console.log(index);
} );

<ul>
<li>item
<li>item
<li>item
<li>item
</ul>

也就是说，您最好将 UID 放入数据中，然后将其包含在 data- 属性中，否则您将面临竞争条件删除错误项目的风险（例如，如果用户在两个不同的选项卡中加载了页面。

需要使用 Javascript 在 html 中获取列表项的索引

Need to get indexof list item in html using Javascript

html

javascript

web-applications

ejs