`

获得父节点,子节点

    博客分类:
  • js
 
阅读更多

一、获取子节点 

比如是一个 id 为 test 的 div元素,我们这样选中,$('#test'),我们要查找这个div下的一个class为demo的span元素,有一下几种方法 
1、使用筛选条件 

$('#test span.demo') 

2、使用find()函数 

$('#test').find('span.demo') 

3、使用children()函数 

$('#test').children('span.demo') 

二、获取父节点 
jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点 

复制代码代码如下:

<ul class="parent1"> 
<li><a href="#" id="item1">jquery获取父节点</a></li> 
<li><a href="#">jquery获取父元素</a></li> 
</ul> 


我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素,有以下几种方法: 

1.$('#item1').parent().parent('.parent1'); 

2.$('li:parent'); 

3.$('#items').parents('.parent1'); 

4.$('#items1').closest('.parent1'); 

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 

closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。closest对于处理事件委派非常有用。

分享到:
评论

相关推荐

    树父节点递归获取树子节点

    使用这个工具类时,只需要创建一个树结构,然后调用 `TreeUtils.getAllChildren(rootNode)` 即可得到从指定父节点开始的所有子节点。这种方法的时间复杂度是 O(n),其中 n 是树的节点总数,因为每个节点只被访问一次...

    javascript获取指定节点父节点、子节点的方法

    JavaScript 获取指定节点父节点、子节点的方法 在实际的开发中,我们经常需要获取页面中某个 HTML 元素,动态更新该元素的样式、内容属性等。那么如何获取要更新的这些元素呢?用 JavaScript 获取这些节点的方法有...

    根据当前节点获取所有父节点信息

    根据当前节点获取所有父节点信息(18代)SQL根据当前节点递归遍历获取所有父节点信息,短短的SQL可以解决复杂的问题

    解决Jstree 选中父节点时被禁用的子节点也会选中的问题

    在使用Jstree的过程中,开发者可能会遇到一个普遍问题:当选中一个父节点时,即使它的某些子节点被禁用了,这些子节点也会被自动选中。这个问题尤其会在使用checkbox插件时表现得更为明显。为了解决这个问题,可以...

    c# treeview 获取子节点

    例如,获取特定父节点下的所有子节点: ```csharp List&lt;TreeNode&gt; GetChildNodesByParent(string parentText) { List&lt;TreeNode&gt; children = new List(); foreach (TreeNode node in treeView1.Nodes) { if ...

    Easyui Tree获取当前选择节点的所有顶级父节点

    在开发过程中,有时我们需要获取用户当前选择的节点,并且需要得到这个节点的所有顶级父节点,以便于进行数据处理或者展示路径。本文将详细讲解如何实现这一功能。 首先,获取当前选中的节点是通过`$('#tree').tree...

    jquery实现点击TreeView文本父节点展开/折叠子节点

    根据提供的文件信息,可以提炼出以下几个知识点: ...要实现一个点击TreeView文本父节点展开/折叠子节点的功能,开发者需要具备对jQuery和TreeView控件工作的深入理解,以及编写和调试JavaScript代码的能力。

    遍历多级树状json获得父子节点值

    "name": "子节点1", "children": [ { "name": "孙子节点1", "age": 5 }, { "name": "孙子节点2", "age": 7 } ] }, { "name": "子节点2", "age": 30 } ] } ``` 如果我们想找到名为"孙子节点2"的...

    Vue 实现树形结构非tree组件

    Vue实现树形结构,不采用tree组件,利用循环方式得到;实现全选,勾选父节点自动勾选子节点,勾选子节点反勾选相应父节点功能

    vue elementUI tree树形控件获取父节点ID的实例

    通过这种方式,我们可以确保父节点在子节点被选中时被加入到选中节点的数组中。在遍历过程中,如果子节点为选中状态或者半选状态,并且叶子节点的条件也被满足(如果设置了`leafOnly`参数),那么就将该子节点的数据...

    关于extjs treepanel复选框选中父节点与子节点的问题

    整个过程的核心在于`checkchange`事件的处理,通过监听并响应复选框的变化,我们可以确保父节点和子节点之间的关联性得到正确维护。这种方式在需要管理具有层级关系的选项时非常有用,如权限管理、目录选择等场景。 ...

    JavaScript 获取元素在父节点中的下标(推荐)

    在JavaScript中,获取元素在父节点中的下标是一项常见的任务,尤其在进行DOM操作和页面交互时。在jQuery中,我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而,在原生JavaScript中...

    VB的Treeview控件复选框如何做到父子多级节点联动代码实例

    对于子节点,如果其父节点存在,则更新父节点的选中状态,使其与子节点一致。 这个实例中的代码可能还会涉及到递归处理,以便处理爷、父、子等更深层次的节点联动。递归函数会遍历整个树形结构,确保所有相关节点的...

    QTreeWidget的勾选,未勾选,半勾选

    本文将深入探讨如何在QTreeWidget中实现勾选、未勾选以及半勾选的功能,同时满足用户对父节点和子节点的联动控制。 QTreeWidget的基础操作包括添加、删除、修改和显示项。每个项(QTreeWidgetItem)都可以拥有子项...

    javascript获取网页中指定节点的父节点、子节点的方法小结

    通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如 今,已经...

    zTree获取当前节点的下一级子节点数实例

    如果节点是父节点,我们就访问`children`属性并加上1来得到子节点总数,加1的原因是考虑到可能需要添加新的子节点。如果节点不是父节点,我们简单地返回1,因为没有下一级子节点。 在实际使用中,你可以结合zTree的...

    js代码-NodeTraverse 参考下图,输出 id 和 level 的映射 定义 根节点的 深度 是 0,子节点的深度是父节点的 深度 + 1

    根节点是树的起始点,没有父节点,而叶子节点则是没有子节点的节点。 为了实现这个功能,我们首先需要构建一个表示树的节点类,包含id和指向子节点的引用。然后,我们可以创建一个递归函数来遍历树并计算每个节点的...

    XML节点的操作

    在给定的代码片段中,可以看到一系列关于XML节点操作的方法,包括查询所有节点、删除子节点、添加子节点以及更新子节点。下面分别对这些方法进行详细解析。 ##### 1. 查询所有节点(`selectAllNodes()`) - **创建...

    C++简单实现红黑树的插入

    进行左旋(父节点),然后将父节点变为祖父节点的颜色,祖父节点变为红色,原祖父节点的左子节点(原父节点的兄弟)变为黑色。此时,原问题转换为情况5。 - **情况5:**祖父节点是黑色,叔叔节点是黑色,且父节点...

Global site tag (gtag.js) - Google Analytics