使用jQuery查找任何后代的第一个id

Find the first id of any descendant using jQuery

本文关键字：第一个 id 后代 任何 jQuery 查找 使用      更新时间：2023-09-26

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

我的HTML一般是这样的:

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

然后我使用div的id作为本地存储中的键，以便在页面上有多个可拖动对象不会导致它们在刷新时都被赋予相同的位置。

然而，像这样的模板有时会在处理可见性的模板中使用，所以有时它们会像这样: 
<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类每次都是通过编程方式添加的。

这些模板可能会有所不同，但永远不会在其中包含id -如果有的话，它们将是非常糟糕的模板-所以我只需要找到具有id的第一个后代元素并使用该id的值作为我的本地存储键。

我怎样才能找到最近的元素与JS?我知道jQuery有一个.closest()方法，它可以找到最近的祖先-我需要朝相反的方向走。我也知道jQuery的.find()可以找到我匹配一个选择器的所有后代，但我不确定我能保证jQuery返回这些子的顺序，因为API文档在这一点上不清楚。

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

find列出文档顺序(又名"DOM顺序")中的元素(您是对的，我很惊讶在文档中没有看到明确的声明)。"文档顺序"是一个定义良好的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文档中找到关于它的明确说明，这似乎是一个疏忽。到目前为止，我发现最接近的是记录了一个异常(例如，在这里说"The second and third…使用一个或多个DOM元素创建一个jQuery对象，这些元素已经以其他方式被选中…不像大多数其他多元素jQuery操作，元素不按DOM顺序排序。[我强调]。)多选择器文档还指出，结果将按照文档顺序排列(而不是选择器的顺序)。

相关文章：