與li內的元素互動時，我怎么知道我在li內的位置？

Question

我正在動態添加到主要的待辦事項“列表” ul 。

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

在描述input上執行事件時，我怎么知道我在二li ？ （嘗試檢索輸入內容在其中的li的文本）

我一輩子都想不通如何選擇“向后”。

將不勝感激一些提示或術語給谷歌。

謝謝！

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，因此可能需要將change偵聽器添加到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

尋找LI元素

• 事件處理程序中的this值是附加了處理程序的對象，無論是通過addEventListener還是通過將函數分配給“ onEventName”屬性/屬性。 但是，如果委派了事件處理， this可能不是觸發事件的對象。

• event對象的target屬性是觸發了事件的對象。 （ 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 。

在列表中找到其位置

如果無序或無序元素沒有自己的ID，則可以在輸入元素的父節點鏈中找到它，類似於在上方查找LI元素的方式（即，直接編碼或搜索）。

LI元素在OL或UL列表條目中的位置可以通過在OL / UL元素的children屬性中搜索並將其與元素匹配來找到。

請注意， node.children集合是活動的，並且在通過動態在DOM中移動LI元素來對LI元素進行排序時，不應使用它們。