在没有jQuery的情况下找到最接近的元素-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要查找元素并对其进行操作。而在早期的前端开发中，使用 jQuery 是非常普遍的选择。然而，现代浏览器已经支持了许多原生 JavaScript API，使得我们可以在不依赖于 jQuery 的情况下完成大部分任务。本文将介绍如何在没有 jQuery 的情况下找到最接近的元素，并提供一些示例代码。

使用原生 JavaScript API

在没有 jQuery 的情况下，我们可以使用原生 JavaScript 来查找最接近的元素。在 DOM 中，每个元素都有一系列属性和方法，我们可以利用这些属性和方法来查找元素。以下是一些常用的方法：

parentNode：返回一个元素的父元素。
previousSibling：返回上一个兄弟元素。
nextSibling：返回下一个兄弟元素。
previousElementSibling：返回上一个兄弟元素节点。
nextElementSibling：返回下一个兄弟元素节点。

我们可以通过这些属性和方法来查找最接近的元素。

查找最接近的元素

假设我们有以下 HTML 结构：

<div class="container">
  <ul>
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

现在我们想要找到 class 为 container 的 div 元素，可以使用以下代码：

var listItem = document.querySelector('.active');
var container = listItem.parentNode;
while (container && !container.classList.contains('container')) {
  container = container.parentNode;
}
console.log(container);

这段代码首先通过 document.querySelector 方法找到了 class 为 active 的 li 元素。接着，它使用 parentNode 方法找到了 li 元素的父元素 ul。最后，它使用一个 while 循环，不断将容器设置为其自身的父元素，直到找到 class 包含 container 的 div 元素。

当然，如果你只需要查找上一个或下一个兄弟元素，可以使用 previousSibling 和 nextSibling 方法。例如，如果我们想要找到当前 li 元素的下一个 li 元素，可以使用以下代码：

var listItem = document.querySelector('.active');
var nextListItem = listItem.nextSibling;
while (nextListItem && nextListItem.nodeType !== 1) { // 跳过文本节点等非元素节点
  nextListItem = nextListItem.nextSibling;
}
console.log(nextListItem);

这段代码使用 nextSibling 方法找到了当前 li 元素的下一个节点（包括文本节点）。然后，它使用一个 while 循环来跳过非元素节点，直到找到下一个 li 元素。

结论

在没有 jQuery 的情况下，我们可以使用原生 JavaScript 来查找最接近的元素。虽然这需要一些额外的代码，但它确实比依赖于 jQuery 更加轻量级。希望本文能够对你有所帮助！

示例代码

以下是完整的示例代码：

-- -------------------- ---- -------
---- ------------------
  ----
    -------- ------
    --- ------------------- ------
    -------- ------
  -----
------

--------
  --- -------- - ----------------------------------
  --- --------- - --------------------
  ----- ---------- -- ------------------------------------------- -
    --------- - ---------------------
  -
  -----------------------

  --- ------------ - ---------------------
  ----- ------------- -- --------------------- --- -- -
    ------------ - -------------------------
  -
  --------------------------
---------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/13652