jQuery遍历-最接近()的介绍以及最接近()和父()的区别分析

Closest()方法获取匹配选择器的第一个祖先元素，从当前元素开始，向上到DOM树。语法：的。最接近的(选择器)参数选择器是一个字符串值，它包含匹配元素的选择器表达式。给定一个表示DOM元素集合的jQuery对象。closest()方法允许我们在DOM树中检索这些元素及其祖先，并构造一个具有匹配元素的新jQuery对象。那个。父母()和。最近的()方法是相似的，因为它们都遍历DOM树。虽然它们之间的区别很细微，但很重要：最近的()。parents()从当前元素开始，从父元素开始，向上遍历DOM树，直到找到应用了选择器的匹配项。遍历DOM树，直到文档的根元素，并将每个祖先元素添加到一个临时集合中；如果应用了选择器，将根据选择器筛选集合。返回包含零个或一个元素的jQuery对象返回包含零个、一个或多个元素的jQuery对象。首先，看下面的例子：演示如何通过closest()完成事件委托。当点击最近的列表元素或其后代时，黄色背景复制码将切换如下：DOCTYPE html htmlheadscript type=' text/JavaScript ' src=' http :/jquery/jquery . js '/script style Li { margin : 3px；padding: 3px背景： # EEEEEEE；} li.hilight { background:黄色；}/style/床头ul点击我！/li李由也可以点击我！/li /ulscript $(文档)。bind('click '，function(e ) { $(e.target)。最近的(' li ')。toggle class(' hilight ')；});/script/body/html1。当鼠标点击“你也可以”时，颜色会发生变化。这是因为最近的从当前元素向上遍历。与parents()方法不同，它从当前元素的父元素开始向上遍历。2.当点击点击我！颜色也会发生变化。经过以上步骤，从当前元素开始匹配，但不满足条件。当它再次上升时，它遇到了李。3.示例演示，请访问：http://www.w3school.com.cn/tiy/t.asp? F=jquery _遍历_最近示例2:复制代码代码如下： ul ID=' one ' class=' level-1 ' Li class=' item-I ' I/Li Li ID=' ii ' class=' item-ii ' ii ' ul class=' level-2 ' Li class=' item-a ' a/Li class=' item-b ' b ' ul class=' level-3 ' Li class=' item-1 ' 1/Li class=' item-2 ' 2/Li副本代码如下$: ('li。项目-a)。结果：这将改变2级ul的颜色，因为当向上遍历DOM树时会首先遇到这个元素。如下图所示：

假设我们正在搜索李元素$('李。项目-a’)。最接近的('李')。CSS('背景色'，'红色')；这将改变列表项a的颜色。closer()方法从li元素本身开始搜索，直到选择器匹配项a .示例3我们可以将DOM元素作为上下文传递(即限制搜索的最大范围)，并在其中搜索最接近的元素。复制代码如下： varlistitem II=document . getelementbyid(' II ')；$('li.item-a ')。最接近(' ul '，listItemII)。css('背景色'，'红色')；$('li.item-a ')。最接近('一'，listItemII)。css('背景色'，'绿色')；上面的代码会改变-2级ul的颜色，因为它不仅是列表项a的第一个ul祖先，也是列表项II的后代。它不会改变1级ul的颜色，因为它不是列表项II的后代。