TL; DR
如何检索NodeList中的Node位置?从零开始的结构中的offset位置,而不是top
或left
我有一个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();
});