zoukankan      html  css  js  c++  java
  • Jquery学习笔记:利用parent和parents方法获取父节点

    通过选择器一般只能获取指定标识的节点,或者获取子节点。

    有些场景下,往往需要根据当前节点找到满足条件的父节点。这个可以通过相应的方法来实现。

    1、parent方法

    该方法可以获取元素的直接父节点。

    我们还是通过例子来说明

    <div>
     <p id="pid"></p>
     <span class="cspan"></span>
     <div>
      <a id="aid"></a>
      <span>test</span>
     </div>
    </div>

    js代码如下

      var obj = $("#aid").parent(); //获取到的是aid元素的直接父节点div元素
      alert(obj.html());

    可以指定parent方法的参数,如 $("#aid").parent("div") 来检查父节点是否满足特定的条件。

    2、parents方法

    该方法可以获取元素所有上层节点(直到根节点)的集合。如:

    <html>

    <body>

    <div class="mydiv">
     <p id="pid"></p>
     <span class="cspan"></span>
     <div>
      <a id="aid"></a>
      <span>test</span>
     </div>
    </div>

    </body>

    </html>

    js代码

      var obj = $("#aid").parents(); //一共获得4个父节点,div>div>body>html
      obj.each(function(index,data){
       alert($(data).prop("tagName"));
      });

    可以通过给parents方法加参数来有条件的选择父节点。

    如 $("#aid").parents("div") 只返回节点标签为DIV的 上层节点集合。

    如 $("#aid").parents(".mydiv")  只返回节点包含样式mydiv 的 上层节点集合。

    3、小结

    通过上面两个方法,加上各种条件设置,可以获取到各种条件的上层节点。

  • 相关阅读:
    [译] 我最终是怎么玩转了 Vue 的作用域插槽
    通俗易懂的Git使用入门教程
    JS取出两个数组的不同或相同元素
    jQuery中四种事件监听的区别
    vuex里mapState,mapGetters使用详解
    php 获取时间今天明天昨天时间戳
    Linux crontab定时执行任务
    php返回json数据函数实例_php技巧_脚本之家
    mysql查看表结构命令
    Mysql命令大全
  • 原文地址:https://www.cnblogs.com/51kata/p/5103414.html
Copyright © 2011-2022 走看看