需要使用 Javascript 获取 html 中的 indexof 列表项

【问题标题】：Need to get indexof list item in html using Javascript需要使用 Javascript 获取 html 中的 indexof 列表项
【发布时间】：2021-02-24 22:20:51
【问题描述】：

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

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

或将其删除到我的项目数组中 toDoArray 存储在节点的后端。

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

谢谢

【问题讨论】：

标签： javascript html web-applications ejs

【解决方案1】：

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

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- 属性中，否则您将面临竞争条件删除错误项目的风险（例如，如果用户加载了页面在两个不同的选项卡中）。

【讨论】：