javascript - 如何获取NodeList中的Node位置？

Question

TL;DR

如何检索 NodeList 中的节点位置？从零开始的结构中偏移含义中的位置，而不是 top 或 left

的位置 <小时/>

我有一个 jQuery UI Draggable/Droppable，当拖动的元素被放下时，它会填充一个数组。因为它非常简单，所以我使用一个简单的 Array.push()

当构建 UI 以显示有关拖动元素的一些信息(重要内容的缩略图)时，我检索此数组并操作之前创建的最后一个节点。无论获取最后一个节点的所有其他可能性如何，当它等于我已经注册的元素数量时，我都会通过偏移量检索它:

let offset  = mySource.length;

// Sounds like a bathroom >.<

let $item = $( '#data .entry' ).eq( offset ).addClass( 'occupied' );

它可以工作，但这些元素最终可能会被删除，因此显然必须更新数组。但要做到这一点，我可能需要 Array.slice() 的偏移量，并且我正在考虑(问题来了)获取被单击元素的父元素的位置(触发删除操作)并将其用作偏移量，因为 Array 和 NodeList 都是从零开始的集合。

考虑这样的 NodeList 结构:

.fa {
  cursor: pointer;
  margin-left: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="data">

  <div class="entry">
    <p>
      Lorem ipsum dolor blah blah blah #1
      <span class="fa fa-trash" title="Remove"></span>
    </p>
  </div>
  
  <div class="entry">
    <p>
      Lorem ipsum dolor blah blah blah #2
      <span class="fa fa-trash" title="Remove"></span>
    </p>
  </div>
  
  <div class="entry">
    <p>
      Lorem ipsum dolor blah blah blah #3
      <span class="fa fa-trash" title="Remove"></span>
    </p>
  </div>
  
  <div class="entry">
    <p>
      Lorem ipsum dolor blah blah blah #4
      <span class="fa fa-trash" title="Remove"></span>
    </p>
  </div>
  
  <div class="entry">
    <p>
      Lorem ipsum dolor blah blah blah #5
      <span class="fa fa-trash" title="Remove"></span>
    </p>
  </div>
  
</div>

当单击其子节点.fa时，如何获取#data内节点.entry的位置？

Answer 1

How could I get the position of the Node .entry inside the #data when its child .fa is clicked?

使用closest()遍历到父条目并获取它的 index()

$('#data .entry .fa').click(function(){
   // target entry instance
   var $entry = $(this).closest('.entry');
   // get entry instance index amongst it's siblings
   var entryIndex = $entry.index();    
});