单击添加类 closest div

简介

在编写前端代码时，有时候我们需要找到某个元素的最近的父级元素。此时，jQuery提供了一个非常方便的方法closest()。但是，在原生的JavaScript中，我们需要写更多的代码来实现相同的功能。为了解决这个问题，我们可以编写一个函数来实现类似的功能。本文将介绍如何编写一个函数来查找某个元素的最近的父级元素。

程序示例

function closest(el, selector) {
  var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

解释

在上面的代码中，我们定义了一个名为closest()的函数，它接受两个参数：元素和选择器。

为了查找最近的父级元素，我们需要使用一个循环来遍历元素的所有父级元素。在循环中，我们首先检查当前元素是否与选择器匹配。如果是，我们就返回它。否则，我们将父级元素设置为当前元素的父元素，并继续循环。如果循环结束后仍没有找到匹配的元素，则返回null。

在循环中，我们使用了matchesSelector()方法来检查当前元素是否与选择器匹配。这个方法在大多数浏览器中都有实现，但它的名字有些差异。因此，我们使用了多个条件来检查它是否可用，并选择可用的方法。

示例用法

例如，假设我们有一个HTML页面，其中包含一个按钮和一个<div>元素，我们希望在点击按钮时找到最近的<div>元素。

<button id="myButton">Click</button>
<div id="container">
  <div id="child">
    <span>Some text</span>
  </div>
</div>

我们可以使用以下代码来找到最近的<div>元素。

var btn = document.querySelector('#myButton');
var div = closest(btn, 'div');

在上面的代码中，我们首先获取按钮元素并将其存储在一个变量中。然后，我们调用closest()函数来查找最近的<div>元素，并将其存储在另一个变量中。

总结

在本文中，我们介绍了如何编写一个函数来查找某个元素的最近的父级元素。我们利用了JavaScript的原生方法来遍历DOM树，并使用了选择器API来检查元素是否匹配。这个函数可以帮助我们在原生的JavaScript中更方便地实现类似于jQueryclosest()方法的功能。