Блог

Главная - Вопросы по программированию - Нужно получить элемент списка indexof в html с помощью Javascript

Нужно получить элемент списка indexof в html с помощью Javascript

#javascript #html #web-applications #ejs

#javascript #HTML #веб-приложения #ejs

Вопрос:

В веб-приложении со списком задач я использую EJS для добавления элементов в <ul> список.

Используя javascript, я хочу иметь возможность извлекать индекс элемента списка по щелчку мыши, чтобы либо управлять его CSS

или удалить его в моем массиве элементов toDoArray , хранящихся в серверной части в node.

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

Спасибо

Ответ №1:

Вы можете получить родительский узел в событии click, затем получить все его дочерние элементы, а затем выполнить поиск в этом списке для того, который соответствует элементу, на который был нажат (цель события).

 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- атрибут, иначе вы рискуете из-за состояния гонки удалить неправильный элемент (например, если пользователь загрузил страницу на двух разных вкладках).

Метки: