jQuery parent() 和 parents() 示例

jQuery parent() 和 parents() 示例

parent()是jQuery内置的一个方法,用于寻找与所选元素相关的父元素。在jQuery中的这个parent()方法可以遍历所选元素的上一层并返回该元素。
语法:

$(selector).parent()

这里的选择器是指需要找到其父级的选定元素。
参数:它不接受任何参数。
返回值:它返回所选元素的父元素。
jQuery代码显示此功能的工作:

<html>
  
<head>
    <style>
        .main_div * {
            display: block;
            border: 1px solid green;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
          
    </script>
    <script>
        (document).ready(function() {
            ("span").parent().css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    </script>
</head>
  
<body>
  
  <div class="main_div">
    <div style="width:500px;">div (Great-Grandparent)
      <ul>This is the grand-parent of the selected span element.!
      <li>This is the parent of the selected span element.!
      <span>This is the span element !!!</span>
      </li>
      </ul>
    </div>
   </div>
</body>
  
</html>

在上面的代码中,只有被选中的元素的父元素得到了深绿色的颜色。
输出:
jQuery parent() 和 parents() 示例

parents()是jQuery内置的一个方法,用于查找与所选元素相关的所有父元素。这个parents()方法在jQuery中遍历了所选元素的所有级别,并返回所有元素。
语法:

$(selector).parents()

这里的选择器是选定的元素,它的所有父级需要找到。
参数:它不接受任何参数。
返回值:它返回所选元素的所有父元素。
jQuery代码显示此功能的工作:

<html>
  
<head>
    <style>
        .main_body* {
            display: block;
            border: 2px solid green;
            color: green;
            padding: 5px;
            margin: 15px;
        }
    </style>
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
        (document).ready(function() {
            ("span").parents().css({
                "color": "green",
                "border": "2px solid green"
            });
        });
    </script>
</head>
  
<body class="main_body">
  <div style="width:500px;">This is the great grand parent of the selected span element.!
   <ul>This is the grand parent of the selected span element.!
   <li>This is the parent of the selected element.!
   <span>This is the selected span element.!</span>
   </li>
   </ul>
   </div>
</body>
  
</html>

在上面的代码中,所有被选中的父元素都被显示为深绿色。
输出:
jQuery parent() 和 parents() 示例

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程