写在一个JS动态效果的时候,发现了一个在JQuery中从来没有见过的 closest() 方法,看了一下介绍和使用方法,发现非常的好用。下面的博文,飞鸟慕鱼博客就来详细的说一下。

jQuery closest() 方法

closest():从当前元素开始向上,遍历所有的祖先元素,直达文档的html元素标签。

语法:

$(selector).closest(filter)

参数:

filter:必填,搜索祖先元素范围的选择器表达式、元素或 jQuery 对象。

context:选填,在其内可以找到匹配元素的 DOM 元素。

jQuery closest() 方法的使用

示例1:

<ul>
    <li><span id="mochu">sdfsdf</span></li>
</ul>
<script>
$('#mochu').closest('ul').css('color','red');
</script>

示例2:

<div class="divs">
    <ul>
        <li><span id="mochu">feiniaomy.com</span></li>
        <li><span>我会变成红色</span></li>
        <li><span>飞鸟慕鱼博客</span></li>
    </ul>
</div>
<script>
$('#mochu').closest('.divs').css('color','red');
</script>

示例3:

<div class="divs">
    <ul>
        <li><span id="mochu">feiniaomy.com</span></li>
        <li><span>我会变成红色</span></li>
        <li><span>飞鸟慕鱼博客</span></li>
    </ul>
</div>
<script>
$('#mochu').closest('ul').find('li').eq(1).css('color','red');
</script>