Jquery 父节点、子节点处理

最新推荐文章于 2022-07-07 00:08:51 发布

原创最新推荐文章于 2022-07-07 00:08:51 发布 · 667 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在JavaScript中使用Jquery处理父节点和子节点的关系，特别是涉及状态切换的场景。讲解了将DOM元素转换为Jquery对象，获取父节点及遍历子节点的方法，并展示了在多层级结构中按class查找特定父节点的技巧。同时，讨论了通过button点击事件获取相关row的data-id值以及利用.parent()方法获取父节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要处理的是简单的两个单选按钮的状态切换

在这里插入图片描述

知识点

把html传进来的this，转换为Jquery对象

// 在JSP 页面
<div style="float: right;margin-right: 20px;">
      <button class="" onclick="onClickSiteType(this)"> 城区网点 </button>
      <button class="selected" onclick="onClickSiteType(this)"> 县城网点 </button>
</div>

// js 代码  通过$() 获取Jquery对象
function onClickSiteType(bt){
   $(bt).parent().children(".selected").removeClass("selected");
   $(bt).addClass("selected");
}

通过Jquery对象获取，对象的父节点、以及遍历父节点的所有子节点

// $(bt).parent() 获取父节点；
// $(bt).parent().children(".selected") 遍历父节点的子节点，查找selected的节点
// .removeClass("selected") 查找的节点删除class类型
$(bt).parent().children(".selected").removeClass("selected");

在多层级父节点中，根据class查找，符合的父节点。

点击下面的button的时候，获取row中的 data-id 值

根据button的点击事件，能获取row父节点(parents)
获取自定义参数值(.attr)

<div class="row" data-id="<%= obj.id%>">
    <div class="firstLine">
        <div class="operation">
            <button id="distributeBt"  class="btn">分配</button> 
        </div>
    </div> 
</div>

// 跟parent 方法不一样，parents方法是，一层一层遍历，知道查找到符合的元素
// attr 方法获取自定义属性参数
distributeFunc: function(event) {
   var selectManagerId = $(event.currentTarget).parents('.row').attr("data-id");
}

在这里插入图片描述