jQuery遍历之parent()方法

最新推荐文章于 2023-05-24 13:28:12 发布
最新推荐文章于 2023-05-24 13:28:12 发布
阅读量511 收藏
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37036642/article/details/76652440
版权

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法

因为是父元素，这个方法只会向上查找一级

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

查找ul的父元素div, $(ul).parent()，就是这样简单的表达

parent()无参数

parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象

注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一个元素的父元素

parent()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 400px;
    }
    
    .left div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
    <h2>parent方法()</h2>
    <div class="left first-div">


    <div class="div">
        <ul class="level-2">
            <!-- A -->
            <li class="item-a">A</li>
            <!-- B -->
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <!-- C -->
            <li class="item-c">C</li>


        </ul>
    </div>


    <div class="div">
        <ul class="level-2">
            <!-- A -->
            <li class="item-a">A</li>
            <!-- B -->
            <li class="item-b">B
                <ul class="level-3">
                    <li class="item-1">1</li>
                    <li class="item-2">2</li>
                    <li class="item-3">3</li>
                </ul>
            </li>
            <!-- C -->
            <li class="item-c">C</li>


        </ul>
    </div>
    </div>


    <button>点击：parent无参数</button>
    <button>点击：paren传递选择器</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //?
        // $('level-3').parent().css('border','1px solid red')
           $(".item-b").parent().css("border", "1px solid red");
    })
    </script>


    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有class=item-a的父元素
        //然后给每个ul,然后筛选出最后一个，加上蓝色的边
       $('.item-a').parent(':last').css('border', '1px solid blue')
    })
    </script>


</body>


</html>

使用jQuery的parent()方法来获取元素的父级元素。
ByteWhiz的博客
10-02 609
通过使用jQuery的parent()方法，我们可以轻松地获取元素的父级元素，这对于处理DOM结构非常有用。在上面的代码中，我们使用".child"选择器选择class为"child"的元素，并调用parent()方法来获取其父级元素。需要注意的是，如果选择的元素没有父级元素，parent()方法将返回一个空的jQuery对象。在上面的代码中，我们使用".container-parent"选择器作为parent()方法的参数，这将限制父级元素的选择范围。parent()方法返回被选元素的直接父级元素。
jQuery中的parent方法详解
最新发布
PixelLancer的博客
10-05 1153
其中，parent()方法是jQuery提供的一个强大的方法之一，用于获取匹配元素集合中每个元素的直接父元素。通过使用parent()方法，我们可以方便地获取元素的直接父元素，并对其进行进一步操作或筛选，从而实现更灵活的页面操作和交互效果。parent()方法的作用是返回匹配元素集合中每个元素的直接父元素。其中，selector是要查找的元素的选择器，filter是一个可选参数，表示要筛选的父元素的选择器。然后，我们使用each()方法遍历父元素集合，并使用。// 获取所有元素的直接父元素。
jQuery .parent() 方法？
墓亦龍的博客
04-02 3686
.parent() 方法1、定义及用法：返回被选元素的 直接父元素。                          DOM树：该方法只沿着DOM树向上遍历单一层级。                                          若需向上遍历多个层级(祖父节点活其他祖先)，请使用parents()或parentsUntil()方法。                      ...
jQuery中parent()方法与parents()方法
nairuozi的博客
11-09 925
1.parent([expr]) ：取得一个包含着所有匹配元素的唯一父元素的元素集合。 2.parents([expr]) ：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。 3.children([expr]) ：获取匹配元素的所有子元素组成的集合；该方法只考虑子元素而不考虑任何后代元素。 <form > <input type="text"> ...
jquery找祖先包含_Jquery的parent和parents(找到某一特定的祖先元素)用法
weixin_39863918的博客
12-21 163
$("p").parent();//取得的是div2、div3、div4$('p').parent('.a');//取得是div3$('p').parent().parent();//取得是div1(这点比较奇特，不过Jquery对象本身的特点决定了这是可行的)$('p').parents();//取得的是div1、div2、di...
jQuery中的parent方法、parents方法
徐冰的博客
11-09 1万+
一、parent()方法： 取得一个包含着所有匹配元素的唯一父元素的元素集合。 html代码如下： <form> <input type="radio" value="0"/>男<input type="radio" value="1"/>女 </form> jQuery代码如下： <script> var dom = $("[ty...
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
12-02
在jQuery库中，遍历DOM树是常见的操作，特别是对于元素的查找和操作。`parent()`、`parents()`和`parentsUntil()`这三个方法都用于在DOM层级上进行导航，但它们各自有不同的用法和特点。 1. `parent(selector)`： ...
jQuery遍历节点树方法分析
10-21
本篇文章将重点介绍jQuery遍历节点树的常用方法，并结合实例展示这些方法的应用。 首先，我们需要了解基本的jQuery选择器。jQuery选择器允许我们以特定的模式选取页面中的DOM元素，比如通过id、类名、标签名或属性...
jQuery 遍历 – 祖先
12-13
jQuery提供了几个方便的方法来实现这个功能，包括`parent()`、`parents()`和`parentsUntil()`。 1. **jQuery `parent()` 方法** `parent()`方法用于获取匹配元素集中的每一个元素的直接父元素。它只返回一级上级...
Jquery遍历节点的方法小集
10-26
JQuery提供了许多方法来进行节点的遍历操作，以下是一些常用的遍历节点的方法及其知识点的详细介绍。 1. next()方法 next()方法用于选取每个匹配元素集合中紧接在后面的兄弟元素。如果没有指定选择器，则选取所有...
jq中closest()，parents()，parent()，
weixin_38098192的博客
05-07 1282
closet():         从当前元素开始        沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先        返回包含零个或一个元素的 jQuery 对象parents()：        从父元素开始        沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先         返回包含零个、一个或多个元素的 jQuery 对象parent()：返...
jQuery查找——parent/parents/parentsUntil/closest
qq_27009517的博客
06-12 1684
jquery的parent(),parents(),parentsUntil(),closest()都是向上查找父级元素，具体用法不同 parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合。 parents()：沿 DOM 树向上遍历，直到文档的根元素(<html>)为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。返回零个、一个或多个元素。 closest()：沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。返回零个
jquery的parent()方法
倒骑驴走着瞧的博客
03-17 2900
帮朋友查看一个问题，顺便捡一下web开发知识 parent() 方法返回被选元素的直接父元素 测试用例：修改li的父节点的兄弟节点的样式 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; &lt;
10-jQuery-遍历children、parent、for、each、for...of等
记录java学习日常~
05-24 1113
上述代码表示：通过 $ 函数选择 container 元素，并使用 children() 方法获取它的所有子元素。然后使用 for...of 循环遍历所有子元素，并打印出它们的文本内容。需要注意的是，for...of 循环中的 element 变量是 DOM 元素，需要使用 $ 函数将其转换成 jQuery 对象才能进行相关操作。上述代码表示：使用 $ 函数选择所有 li 元素，并使用 each() 方法遍历它们。在示例代码中，使用 console.log() 打印每个 li 元素的索引和文本内容。
jQuery方法parents()和parent()
qq_42420425的博客
02-26 5646
前两天看有朋友问parents()和parent()方法的区别，自己也比较好奇，就稍微研究了一下，接下来是部分自己的见解，和大家共勉。 拿列表的层级为例来解释这个问题： <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul cla...
jquery的 children（’idv’），parent(div)用法
有 prepare , No out
12-10 1435
1 divid="parentNode"class="treeNode">        Parentnode's text.        id="mainNode"class="treeNode">                 Thetarget node            id="childNode"class="treeNode">             
jquery遍历之parent()与parents()的区别 及 parentsUntil() 方法
热门推荐
大头爸爸的博客
10-27 1万+
.parent(selector) 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。 如果给定一个表示 DOM 元素集合的 jQuery 对象，.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQ
jquery1.0 $(‘div).parent具体执行过程 还没写完
a_gust_wind的博客
07-25 258
jQuery.macros = { to: { appendTo: "append", prependTo: "prepend", insertBefore: "before", insertAfter: "after" }, css: "width,height,top,left,position,float,overflow,color,background".split(","), filter: [ "eq", "lt", "gt", "contains" ],
jquery 循环each简单实例 和 parent 查找父元素的实例
jiazhongkai521的专栏
06-16 1391
下面的方法是隐藏 ：src属性为"wenbin.jpg" 的元素 $(function () { $("img").each(function () { if (($(this).attr("src")) == "wenbin.jpg")
jQuery遍历节点方法详解
"jQuery遍历节点的方法" jQuery 是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在jQuery中，有多种方法用于遍历DOM（文档对象模型）节点，以便对网页元素进行操作。以下是jQuery中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值