使用jQuery

Question

对于我页面上JS中的可拖动div，我想将最后一个位置存储在本地存储中，以便在用户刷新时，页面上的可拖动元素保持不变。

我的HTML一般都是这样的：

<div id="some_id" class="draggable">
    <p>I am a draggable thing.</p>
</div>

然后我使用id的{​​{1}}作为本地存储中的一个键，这样在页面上有多个可拖动的对象并不会导致它们在刷新时被赋予相同的位置

但是，像这样的模板有时会在处理可见性的模板中使用，所以有时它们会是这样的：

div

请注意，每次都会以编程方式添加<div class="visibility_container draggable"> <button class="close_button">Close</button> <div id="some_id"> <p>I am a draggable thing.</p> </div> </div> 类。

这些模板可能会有所不同，但永远不会有draggable - 如果他们这样做，他们就会是非常糟糕的模板 - 所以我只需要找到第一个具有{{1}的后代元素并使用该id的值作为我的本地存储密钥。

如何用JS找到最近的元素？我知道jQuery有一个id方法可以找到最近的祖先 - 我需要向相反的方向前进。我也知道jQuery的id可以找到所有与选择器匹配的后代，但我不确定我能保证jQuery将这些子项返回的顺序为{{3在那一点上并不清楚。

Answer 1

  

我也知道jQuery的.find（），它可以找到所有匹配选择器的后代，但我不确定我能保证jQuery返回这些子节点的顺序API文档在这一点上并不清楚。

find列出了文档顺序中的元素（又名＆＃34; DOM顺序＆＃34;）（而你是对的，我很惊讶看不到在文档中明确说明了这一点。 ＆＃34;文件订单＆＃34;是一个定义明确的DOM术语，它意味着对后代元素进行深度优先搜索。或者用另一种方式：文本在标记中的第一个。

例如：

<div id="container">
   <div>
      <div>
          <div id="one"></div>
   </div>
   <div id="two"></div>
</div>

...然后

console.log($("#container").find("[id]").first().attr("id"));

...将记录one，而非two。

这个文档顺序在大多数jQuery API和DOM方法中很常见，例如querySelectorAll，getElementsByTagName等。我在jQuery文档中没有找到明确的声明，但这似乎是一种疏忽。到目前为止我发现的最接近的是有点记录异常（例如，说here ＆＃34;第二个和第三个...创建一个jQuery对象使用一个或多个已经以其他方式选择的DOM元素... 与大多数其他多元素jQuery操作不同，元素不按DOM顺序排序。＆＃34; < / em> [我的重点]。）multiple selector文档还指出结果将按文档顺序排列（不是选择器的顺序）。