parentsUntil()如何使用？

2020-07-08 19:47发布

站内问答 / jQuery
1369 2 3
发送
2条回答
那些年很冒险的梦。
2楼 · 2020-07-09 09:26

创建一个名称为parentuntil 的html静态文件。创建一个div无序列表，在li中加入一个span，加入样式，设置div，ul ，li 和span中间的同样的padding，在parentuntil页面中引入js，jquery库，在文档准备方法中加入parentuntil方法，找到span和div中间的所有span祖先类元素并设置边框和颜色，在浏览器中运行该文件。可以看到div和span之间的所有span祖先元素。


chai - 嘿咻嘿咻~
3楼 · 2020-12-20 21:58

parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。

祖先是父、祖父、曾祖父，依此类推。

DOM 树：该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径，直到到达指定的元素为止。

注意：如果两个参数都为空，该方法将返回所有祖先元素（与 parents() 方法相同）。

语法

$(selector).parentsUntil(stop,filter)


参数描述
stop可选。表示在哪里停止搜索匹配的祖先元素的选择器表达式、元素、jQuery 对象。
filter可选。规定缩小搜索介于 selector 与 stop 之间的祖先元素范围的选择器表达式。

注意：如需返回多个祖先元素，请使用逗号分隔每个表达式。

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的 元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

查找item-a的祖先，但不包括level-1

    class="level-1">
  
  • class="item-i">I一
    • 
  
  • class="item-ii">二
    
      class="level-2">
      
    • class="item-a">1
      • 
      
    • class="item-b">2
        
        class="level-3">
          
      • class="item-1">1.1
        • 
          
      • class="item-2">1.2
        • 
          
      • class="item-3">1.3
        • 
        
      
      
      • 
      
    • class="item-c">3
      • 
    
    
  
    • 
  
  • class="item-iii">三
    • 




$('li.item-a').parentsUntil('.level-1')
    .css('background-color', 'red');//$(".level-2")、$(".item-ii")、$(".item-i")


相关问题推荐

  • 如何高效地阅读 jQuery 源码？JQuery 2021-12-15 16:59
    回答 2

    1. jQuery 里面有很多东西是出于兼容性，历史遗留。比如 .ready() 之类的函数，为什么会很scroll 有关，那是为了兼容某些ie。这种代码对于编程思想来说不仅没用，而且是杂音，你要筛选出来就得了解这段代码的变动，费心费力得不偿失。2. jQuery 里面的代码不...

  • jquery目前工作中用的还多吗？2020-07-16 17:11
    回答 7
    已采纳

    总结回顾一下jQuery的发展历史，它经历了三个时代：1、jQuery为王的世代。一扫DOJO、Mootools、Prototype等竞争对手，成为前端必备技能。要实现一个功能，首先想到是否有成熟的jQuery Plugin可用。2、jQuery和Angularjs、Bootstrap共存的时代。Angularjs内置...

  • 学前端是先学JS还是先学jQuery？JQuery 2020-03-23 20:58
    回答 6
    已采纳

    一般是这样的，学习jQuery之前应该是先要学习JavaScript的，因为jQuery是JavaScript的一个类库，所以学习了JavaScript一些知识才能更好的理解jQuery。首先说一下JavaScript和jQuery的联系和区别吧。简单的说jQuery是JavaScript的一个类库，通俗的说就是jQuery...

  • jQuery 是库（library）还是框架(frJQuery 2021-12-23 14:02
    回答 9

    jQuery是库，不是框架。库只管引进来使用，除了库接口，没有其他约束，随便怎么用，free style。而框架则有着各种各样的严格约束。

  • 有哪些jQuery替代品可选?JQuery 2021-12-16 13:48
    回答 6

    最接近替代品的当然是Zepto。不过如果你没有legacy的代码要维护，又只需要支持green browsers，可以考虑完全用标准api。

  • jQuery的css选择器哪几个用的比较多？JQuery 2021-12-21 09:56
    回答 6

    id、name、class这三种会了就行了，后面在实践中慢慢学习吧。。不过现在纯前端好像都不咋用jquery了

  • jQuery在学习前端中重要吗？好学吗JQuery 2020-04-15 13:39
    回答 4
    已采纳

    jq是个js的类库，里面的设计思想非常不错。但是，你假如是个新手，建议你会调用jq的api就行了。jq简化了dom的一些操作，做了一些兼容的代码，让你写得更流畅。等你成了前端大神，js玩得非常6的时候，假如有闲情逸致，可以回来看看jq这个老朋友的源码。jq使用...

  • 前端技术的发展趋势如何，jquery会被逐渐淘汰吗JQuery 2021-12-20 14:34
    回答 6

    前端技术每年都会不断更新，一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，前端技术工程师缺口非常大。技术的发展规律其实，技术的发展趋势就是追求更高的复用性，更简便的业务代码写法，所以最终都会要求跨平台、都会彻底分离非业务逻辑。j...

  • jQuery 怎么实现点击页面其他地方隐藏菜单？JQuery 2021-12-23 14:01
    回答 4

    *{undefinedmargin:0px;padding:0px;}.main{undefinedcursor:pointer;}.list{undefinedborder:1px solid black;display:none;}.list li{undefinedcursor:pointer;border:1px solid red;list-style:none;}#noPopEvent...

  • 前端工程师如何从jquery平滑到react?JQuery 2021-12-21 09:55
    回答 5

    文档过一遍，感觉理解了写一个todolist，然后把react-router文档过一遍，写一个todolist，最后把redux文档看一遍，写一个todolist。这样下来，react全家桶基本理解了

  • 用 jQuery 调用外部 HTML 文件，对 SJQuery 2021-12-20 14:34
    回答 3

    有一定影响,而且不仅对蜘蛛,如果用户浏览器把js禁用的话也显示不了

  • 有什么大站用 jQuery 作为前端脚本开发的呢？JQuery 2021-12-17 10:42
    回答 5

    国外还有 Amazon, 全球最大的电子商务网站。还有微软，很多很多。

  • JavaScript 除了 jQuery 还有什么JQuery 2021-12-17 10:42
    回答 4

    前端框架的vue.js,angular.js,可视化工具d3.js,移动端：zepto等

没有解决我的问题，去提问