jQuery 是前端开发中最常使用的 JavaScript 库之一。而 jQuery-nearest 是一个针对 jQuery 的插件，它提供了一种更便捷的定位元素的方式。下面将详细介绍如何安装和使用这个 npm 包。
安装
在命令行中输入以下代码进行安装：
npm install jquery-nearest
如果你使用的是 yarn：
yarn add jquery-nearest
安装完成后，在需要使用该插件的文件中引入 jquery 和 jquery-nearest：
import $ from 'jquery'; import 'jquery-nearest';
使用方法
nearest()
nearest() 方法通过传递选择器或元素来查找最近的匹配项。例如，假设我们有这样的 HTML 结构：
<div>
<p>Hi</p>
<ul>
<li>One</li>
<li class="active">Two</li>
</ul>
</div>现在，我们想动态地选中与某个元素最接近的 li 元素。可以使用以下代码：
const activeLI = $('li.active').nearest('li');
activeLI.addClass('nearest');这里的 nearest() 方法会往上查找并返回最近的 li 元素，然后通过 addClass() 方法给它添加一个类名。
furthest()
furthest() 方法与 nearest() 方法类似，但它返回与元素最远的匹配项。例如，如果我们有这样的 HTML 结构：
<div>
<p>Hi</p>
<ul>
<li>One</li>
<li class="active">Two</li>
</ul>
</div>现在，我们想选中与 li.active 元素最远的 div 元素。可以使用以下代码：
const farDiv = $('li.active').furthest('div');
farDiv.addClass('furthest');这里的 furthest() 方法会往上查找并返回最远的 div 元素，然后通过 addClass() 方法给它添加一个类名。
示例代码
下面是一个完整的示例代码，演示了如何使用 nearest() 和 furthest() 方法：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------
-------
------
-----
---------
----
------------
--- -----------------------
-----
------
------- -----------------------------------------------------------
------- --------------------------------------------------------------------------------------
--------
---------------------------- -
----- -------- - -----------------------------
-----------------------------
----- ------ - -------------------------------
----------------------------
---
---------
-------
-------运行该 HTML 文件即可看到效果。
总结
通过使用 jquery-nearest，我们可以更容易地找到最近或最远的匹配元素。希望这篇文章能够帮助你更好地理解和使用该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38550