Как мне узнать свое положение внутри ли при взаимодействии с элементом внутри этого ли?

Question

Я динамически добавляюсь в основной список дел ul.

<li>
 <div class="description">
   <input class="descriptionInput" type="text">
 </div>
</li>

Как узнать, что я 'м внутри 2 li при выполнении события по описанию input?(пытается извлечь текст из li, внутри которого находится вход)

Я не могу на всю жизнь понять, как сортировать выбор "назад".

Будетцените несколько подсказок или условий для Google.

Спасибо!

Answer 1

Нахождение элемента LI

• значение this внутри обработчика событий - это объект, к которому прикреплен обработчик, либо с помощью addEventListener, либо путем назначения функции длясвойство / атрибут onEventName.Но если обработка события делегирована, this может не быть объектом, для которого было инициировано событие.

• свойство target объекта event - это объект, для которогособытие было уволено.(srcElement является проприетарным и нестандартным псевдоним из target.)

Так что, если вы слушаете событие, сработавшее на входе, например "change ", элемент li находится в цепочке родительских узлов, которую можно кодировать непосредственно в обработчике как

function (event) {
    let li = event.target.parentNode.parentNode;
    //... do stuff with li

, которая является хрупкой, если принять определенную структуру элемента или выполнить поиск в цепочке родительских узлов:

function (event) {
    let li;
    for( li = event.target; li = li.parentNode;) {
        if( li.tagName == "LI") {
            break;
        }
    }
    // process li ....

, который находит элемент LI или оставляет li установленным на null.

Поиск своей позиции в списке

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

Положение элемента LIв списке OL или UL можно найти записи, выполнив поиск и сопоставив его с элементом в свойстве children элемента OL / UL.

Обратите внимание, что node.children коллекция живая и не должна использоватьсясортировка элементов LI путем динамического перемещения их позиций в DOM.

Answer 2

Ваше событие должно иметь свойство srcElement, которое содержит элемент, из которого произошел элемент.Оттуда вы можете пройти через DOM, чтобы добраться до элемента grand-parent.

например:

myElement.addEventListener('keyup',function(event){
  let input=event.srcElement;
  let div=input.parentElement;
  let li=div.parentElement;
  console.log(li.textContent);
  //or just (event.srcElement.parentElement.parentElement.textContent)
})

Конечно, это работает, только если вы уверены, что ввод будет всегдабыть внучкой ли.Если по какой-либо причине будет добавлен другой элемент, ваш код сломается.Безопаснее искать элемент

Я бы просто искал элемент, используя цикл while.

let element=event.srcElement;
//while the element isn't an li, and it has a parentElement;
while(element.tagName !=='LI' && element.parentElement){
  element=element.parentElement;
}
console.log(element) //should have found the first li ancestor

Answer 3

Попробуйте использовать функцию .closest для перехода к ближайшему li, а затем используйте index() для определения индекса.Кроме того, поскольку вы динамически добавляете li, вам может потребоваться добавить change listener в DOM.

  <ul>
   <li>
    <div class="description">
       <input class="descriptionInput" type="text">
    </div>
   </li>
    <li>
    <div class="description">
       <input class="descriptionInput" type="text">
   </div>
   </li>
 </ul>

<script>
    $(document).on('change','ul li input.descriptionInput', function(){
         var index = $(this).closest('li').index();
          alert(index);
    });
</script>

Пример: https://jsfiddle.net/xpvt214o/874826/

Answer 4

Для этого вы можете использовать функцию index().Если вы работаете с полем ввода под элементом списка.Затем просто выберите вот так:

$("input.descriptionInput").parents("li").index();

Я думаю, это будет работать для вас.