TL; DR

如何检索NodeList中的Node位置?从零开始的结构中的offset位置,而不是topleft



我有一个jQuery UI Draggable / Droppable,可在拖放元素时填充数组。因为非常简单,所以我使用一个简单的Array.push()

在构建UI以显示有关拖动元素的内容(重要的缩略图)时,我检索了此Array并操作了先前创建的最后一个Node。不管获得最后一个节点的所有其他可能性,当它等于我已经注册的元素数时,我都通过offset检索它:

let offset  = mySource.length;

// Sounds like a bathroom >.<

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


它可以工作,但是最终可以删除这些元素,因此显然必须更新Array。但是要做到这一点,我可能需要为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>





单击子.entry的子节点#data时,如何获得节点.fa的位置?

最佳答案

单击子.fa时,如何获取Node .entry在#data中的位置?


使用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();
});

07-24 09:50
查看更多