jQuery遍历之closest()方法

xiaoxiao2021-02-27  133

以选定的元素为中心,往内查找可以通过find、children方法。如果往上查找,也就是查找当前元素的父辈祖辈元素,jQuery提供了closest()方法,这个方法类似parents但是又有一些细微的区别,属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素

例如:在div元素中,往上查找所有的li元素,可以这样表达

$("div").closet("li')

注意:jQuery是一个合集对象,所以通过closest是匹配合集中每一个元素的祖先元素

closest()方法给定的jQuery集合或元素来过滤元素

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个jQuery的对象

注意事项:在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的,都是往上遍历祖辈元素,但是两者还是有区别的,否则就没有存在的意义了

起始位置不同:.closest开始于当前元素 .parents开始于父元素遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,直到找到一个匹配的就停止查找,parents一直查找到根元素,并将匹配的元素加入集合结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />     <title></title>     <link rel="stylesheet" href="imooc.css" type="text/css">     <style>     .left {         width: auto;         height: 200px;     }          .left div {         width: 350px;         height: 150px;         padding: 5px;         margin: 5px;         float: left;         background: #bbffaa;         border: 1px solid #ccc;     }          span {         color: blue;     }     .borderRed{         border:3px solid red;     }      .borderblue{         border:3px solid blue;     }     </style>     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body>     <h2>closest方法()</h2>     <div class="left first-div">     <div class="div">         <ul class="level-2">             <li class="item-a">A</li>             <li class="item-b">B                 <ul class="level-3">                     <li class="item-1">1</li>                     <li class="item-2">2</li>                     <li class="item-3">3</li>                 </ul>             </li>             <li class="item-c">C</li>         </ul>     </div>     </div>     <br/>     <button>点击:closest传递选择器 </button>     <button>点击:closest传递一个元素对象</button>     <script type="text/javascript">     $("button:first").click(function() {                           $('li.item-1').closest('.level-2').toggleClass('borderRed');                  // var itemA = $('ul.level-2')             // $('li.item-1').closest(itemA).css('border','3px solid red');             // $('.item-1').closest('.level-2').css('border','1px solid red')     })     </script>     <script type="text/javascript">     $("button:last").click(function() {         // var itemB = $('.item-b')         $('li.item-1')             .closest('.item-b')             .css('border', '1px solid blue');     })     </script> </body> </html>

具体使用可以参考右边代码区域:

转载请注明原文地址: https://www.6miu.com/read-13269.html

最新回复(0)