与li内的元素互动时，我怎么知道我在li内的位置？

Question

我正在动态添加到主要的待办事项“列表” ul。

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

在描述li上执行事件时，如何知道自己在第二input内？ （尝试检索输入内容在其中的li的文本）

我一辈子都想不通如何选择“向后”。

不胜感激Google的一些提示或条款。

谢谢！

Answer 1

您可以使用index()函数。 如果您正在使用列表项下的输入字段。然后像这样选择：

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

我认为它将为您工作。

Answer 2

您的事件应具有srcElement属性，其中包含元素的来源元素。从那里您可以遍历DOM到达祖父母元素。

例如：

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)
})

当然，这仅在您确定输入将始终是li的孙子时才有效。如果出于任何原因添加了另一个元素，您的代码将中断。搜索元素更安全

我只会使用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，因此可能需要向DOM添加change侦听器。

  <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

查找LI元素

• 事件处理程序中的this值是已附加处理程序的对象，无论是通过addEventListener还是通过将函数分配给“ onEventName”属性/属性。但是，如果委托事件处理，则this可能不是触发事件的对象。

• target对象的event属性是触发事件的对象。 （srcElement是target的专有且非标准的alias。）

因此，如果您正在监听输入上触发的事件，例如“ {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。

找到其在列表中的位置

如果无序或无序元素没有自己的ID，则可以在输入元素的父节点链中找到它，类似于在上方查找LI元素（即，直接编码或搜索）。

通过在OL / UL元素的children属性中的元素进行搜索和匹配，可以找到LI元素在OL或UL列表条目中的位置。

请注意，node.children集合是实时的，在通过动态在DOM中移动它们的位置来对LI元素进行排序时，不应使用它们。