如何在NodeList中获取Node位置?

时间:2017-07-31 12:16:11

标签: javascript jquery arrays

TL; DR

如何在NodeList中检索节点位置?在零基础结构中定位偏移的含义,而不是div#software { width: 100%; height: auto; /* HAS TO BE AUTO */ background: pink; float: left; margin-top: 50px; } #software-text { background: lightblue; width: 45%; float: left; text-align: left; height: 100%; } #software-image { background: yellow; width: 55%; float: right; height: 100%; } .sections { max-width: 960px; height: auto; background: #0f0; margin: 0 auto 50px auto; overflow: auto; } h1 { border-bottom: 1px solid red; background: lightblue; display: inline; padding: 10px; font-size: 25px; margin: 30px 0; }

的位置

我有一个jQuery UI Draggable / Droppable,在删除拖动的元素时填充数组。因为它非常简单,我使用简单的<section class="sections"> <h1>Products</h1> <article id="software"> <div id="software-text">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but dummy text ever since the 1500s, when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentiall also the leap into electronic typesetting, remaining essentially unchanged when an unknown printer took a galley of type and scries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> <div id="software-image">background image goes inside this yellow div &amp; needs to stretch to 100% height</div> </article> </section>

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

top

它可以工作,但最终可以删除这些元素,因此显然必须更新数组。但是要做到这一点,我需要一个偏移,可能是left,我正在考虑(这里有问题)获取被点击元素的父级的位置(触发删除操作)并使用它作为偏移量,因为Array和NodeList都是这样或那样的,从零开始的集合。

考虑像这样的NodeList结构:

&#13;
&#13;
Array.push()
&#13;
let offset  = mySource.length;

// Sounds like a bathroom >.<

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

如果点击其子Array.slice()时,如何在.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>的位置?

1 个答案:

答案 0 :(得分:1)

  

如果单击其子.fa,我怎样才能获得#data中Node.entry的位置?

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