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、小结

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

  • 相关阅读:
    字符编码ANSI和ASCII区别、Unicode和UTF-8区别
    《非暴力沟通》读后感
    软件测试
    报表导出测试点
    如何设计测试用例
    国密算法sm2.sm3.sm4
    免杀原理与实践
    SQL注入攻击
    网络攻防实践 第十周作业
    网络攻防实践第九周
  • 原文地址:https://www.cnblogs.com/51kata/p/5103414.html
Copyright © 2011-2022 走看看