`

jquery遍历-祖先遍历

 
阅读更多
parent()返回被选元素的直接父元素。
parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil()返回介于两个给定元素之间的所有祖先元素。 

<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid blue"});
  $("span").parent().css({"color":"red","border":"1px solid green"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>


  • 大小: 3.5 KB
分享到：
| CSS引入的方式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery选择器 2.pptx

    2、遍历-祖先;2、遍历-祖先;2、遍历-祖先;2、遍历-祖先;3、遍历-后代;3、遍历-后代;3、遍历-后代;4、遍历-同胞;4、遍历-同胞;4、遍历-同胞;4、遍历-同胞;4、遍历-同胞;4、遍历-同胞;5、遍历-过滤;5、遍历-过滤;5、...

    jQuery 遍历 – 祖先

    总结来说，jQuery的遍历祖先方法提供了一套强大的工具，使开发者能够方便地在DOM树中导航，无论是查找单个元素的直接父级，还是选取一系列祖先，或者是限制在特定范围内的祖先，都能游刃有余。这使得jQuery成为前端...

    jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    jQuery作为目前前端开发中最常用的JavaScript库之一，提供了丰富的DOM遍历和操作方法，其中，.closest() 和 .parents() 是用来查找父元素的两个重要方法，虽然它们的功能看起来相似，但它们之间存在细微而关键的区别...

    jquery遍历节点树

    6. **$(selector).closest(selector)**: 这个方法会向上遍历DOM树，直到找到匹配给定选择器的第一个祖先元素。这对于查找最近的父级元素非常有用，比如寻找最近的表单元素。 在实际应用中，这些方法可以组合使用，...

    浅析jQuery 遍历函数，javascript中的each遍历_.docx

    jQuery 遍历函数和 JavaScript 中的 each 遍历 jQuery 遍历函数是 jQuery 库中的一组方法，用于筛选、查找和串联元素。这些方法可以帮助开发者快速地操作和处理 HTML 元素。下面是 jQuery 遍历函数的详细介绍： 1....

    jQuery遍历节点树方法分析

    本篇文章将重点介绍jQuery遍历节点树的常用方法，并结合实例展示这些方法的应用。 首先，我们需要了解基本的jQuery选择器。jQuery选择器允许我们以特定的模式选取页面中的DOM元素，比如通过id、类名、标签名或属性...

    JQuery遍历元素的父辈和祖先的方法

    接下来，我们将探讨如何使用JQuery遍历元素的父辈和祖先。 1. parent()方法 parent()方法用于获取当前选中元素的直接父辈元素。这是遍历父辈元素中最基础的方法。例如，在给定的代码片段中，通过点击一个按钮，使用...

    jQuery 遍历函数详解

    下面我们详细讲解这些jQuery遍历函数的知识点。 .add()函数用于将元素添加到jQuery对象集合中。这个函数可以将新元素直接添加到现有的jQuery对象集合中，实现链式操作。 .andSelf()函数将之前操作返回的元素集添加...

    jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下： 一、向上遍历–祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一个过滤selector来过滤...

    JQuery1.4.1

    - **事件处理**: 支持多种事件绑定，如 `click()`, `change()`, `hover()` 等，同时提供了 `live()` 方法实现事件冒泡到祖先元素，解决了动态添加元素时事件绑定的问题。 ### 3. 文件解析 - **jquery-1.4.1.js**: ...

    jQuery技术手册

    **4.2 jQuery遍历-祖先** - **parents()`: 选择当前元素的所有祖先元素。 - **parentsUntil(selector)`: 选择直到指定元素的所有祖先元素。 **4.3 jQuery遍历-后代** - **find(selector)`: 选择当前元素内部的...

    JQ 遍历祖先

    在压缩包文件"demo"中，可能包含了一个或多个示例代码，演示了如何在实际项目中使用jQuery遍历祖先元素的技巧。通过查看和运行这些示例，你可以更深入地理解和掌握这些方法的用法。 总结来说，"JQ遍历祖先"是jQuery...

    jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    如下图，显示了HTML中的结构树，通过 JQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 遍历 – 父级...

    Jquery遍历节点的方法小集

    JQuery提供了许多方法来进行节点的遍历操作，以下是一些常用的遍历节点的方法及其知识点的详细介绍。 1. next()方法 next()方法用于选取每个匹配元素集合中紧接在后面的兄弟元素。如果没有指定选择器，则选取所有...

    jQuery-1.6-api

    - `$.each()`：遍历数组或对象并执行函数。 2. **选择器（Selectors）**： - CSS选择器：jQuery支持大部分CSS2和CSS3选择器，如`#id`，`.class`，`tag`等。 - 链接选择器：`$("div &gt; p")`选择所有直接在div元素...

Magicbox
Global site tag (gtag.js) - Google Analytics