首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JsTree获取选定的节点同级和子同级ids

JsTree是一个基于jQuery的树形插件,用于在网页中展示树形结构的数据。它提供了丰富的功能和灵活的配置选项,可以方便地实现树形结构的展示和交互操作。

要获取选定的节点同级和子同级的ids,可以使用JsTree提供的方法和事件来实现。以下是一个示例代码:

代码语言:txt
复制
// 初始化JsTree
$('#tree').jstree({
  'core': {
    'data': [
      {
        'id': 'node1',
        'text': 'Node 1',
        'children': [
          {
            'id': 'node1_1',
            'text': 'Node 1.1'
          },
          {
            'id': 'node1_2',
            'text': 'Node 1.2'
          }
        ]
      },
      {
        'id': 'node2',
        'text': 'Node 2'
      }
    ]
  }
});

// 监听节点选中事件
$('#tree').on('select_node.jstree', function (e, data) {
  var selectedNode = data.node;
  
  // 获取选定节点的同级节点ids
  var siblingsIds = selectedNode.parent !== '#' ? $('#' + selectedNode.parent).children('.jstree-node').map(function () {
    return this.id;
  }).get() : [];
  
  // 获取选定节点的子同级节点ids
  var childrenIds = selectedNode.children.map(function (childId) {
    return $('#' + childId).attr('id');
  });
  
  console.log('同级节点ids:', siblingsIds);
  console.log('子同级节点ids:', childrenIds);
});

在上述代码中,我们首先通过$('#tree').jstree({...})方法初始化了一个树形结构,并传入了一些示例数据。然后,我们通过监听select_node.jstree事件来获取选定节点的同级节点和子同级节点的ids。在事件处理函数中,我们首先获取选定节点的父节点id,然后通过jQuery选择器找到该父节点下的所有同级节点,并将它们的id存入siblingsIds数组中。接着,我们通过选定节点的children属性获取其子节点的id,并将它们存入childrenIds数组中。最后,我们通过console.log打印出同级节点ids和子同级节点ids。

这样,我们就可以通过JsTree获取选定的节点同级和子同级的ids了。

关于JsTree的更多详细信息和用法,可以参考腾讯云的产品介绍页面:JsTree产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用jstree创建无限分级树(ajax动态创建节点)

    首先来看一下效果 页面加载之初 节点全部展开后 首先数据库表结构如下 其中Id为主键,PId为关联到自身外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型...OrderNum { get; set; } public int SonCount { get; set; } } 此类型比数据库表增加了一个属性 SonCount 这个属性用来记录当前节点节点个数...其中请求参数pid为客户端需要获取节点ID 如果请求顶级节点,则此参数值为00000000-0000-0000-0000-000000000000 GetMenu函数获取需要请求节点数据...如果顶级节点SonCount属性大于0 则使节点为闭合状态(样式为jstree-closed) 如果节点节点 则该节点样式为jstree-leaf 当用户点击闭合状态节点时,客户端发起请求...并把点击节点ID传给后端,后端获取到点击节点节点后 通过append添加到点击节点下 至此,无限分级树创建完成 其中不包含数据库

    1.8K20

    使用jsTree树形控件【4】

    标准JSON格式 使用JSON渲染jsTree的话,需要指定JSON格式,jsTree可以使用两种JSON格式,在标准JSON格式中,没有必需属性,而且还可以添加自定义属性。...generated LI node a_attr : {} // attributes for the generated A node } 另外一种JSON格式 上面的标准格式中,节点是嵌套在父节点...jsTree会自动创建相应树形结构,通过设置parent = "#"来设置节点为父节点。 这种结构适合于需要一次性渲染树形结构或者数据保存在数据库情况。...JSON数据,然后进行渲染,一样使用$.jstree.defaults.core.data进行配置,如果不能从服务器端获取正确JSOn内容,记得设置dataType为json。...使用函数 还可以给data属性赋值为一个函数,这个函数接收两个参数,一个是正在加载节点对象,一个是回调函数,回调函数返回节点信息。

    2.2K10

    js如何引用同级元素

    ,并且往往指的是同类元素,同类元素在实际开发中遇到比较多 比如:列表li,并列按钮等,当需要做一些特殊效果时,可以对其他同级元素进行一些操作,满足特定网页要求 比如:隔行填充颜色等 原生方法实现...以下是通过原生js实现,点击按钮时,获取按钮值 // 获取同级按钮元素value function getLevelBtnVal(btn) { var p = btn.parentNode...; // 通过点击按钮获取到它父级节点 var children = p.childNodes; // 通过childNodes可以得到父节点所有节点 // 遍历节点...for(var i = 0;i<children.length;i++) { // 判断不是当前节点,但却是同类节点节点 if(children[i] !...,同级元素拥有相同父级元素都是p,那么就可以得到除自身以外同级元素,如果还需要排除同一类别的话,那么可以使用节点nodeType属性来加以区别 Vue版本实现 在Vue里面,就不用类似原生js

    7.9K40

    Inno Setup 3 :语法解析(二

    任何在层次 1 或更高层次组件是组件。在组件前列出小于组件层次组件是上级组件。其他有相同上级组件组件之间称为同级组件。 如果上级组件未选定,则不能选定组件。...根据组件复杂性,可使用[installDelete]段该标记来自动卸载未选定组件。...在组件名称中 \ 或 / 字符符合计数是调用组件层次。任何在层次 1 或更高层次组件是组件。在组件前列出小于组件层次组件是上级组件。其他有相同上级组件组件之间称为同级组件。   ...如果上级组件未选定,则不能选定组件。如果所有的组件均未选定,则上级组件也不能选定,除非Components参数引用上级组件或上级组件包含checkablealone标记。   ...根据组件复杂性,可使用[installDelete]段该标记来自动卸载未选定组件。

    2.4K10

    CSS选择器详解

    我是一个p元素 我是一个div元素 :only-of-type CSS3 E:only-of-type { sRules } 匹配同类型中唯一一个同级兄弟元素...n个同级兄弟元素E 要使该属性生效,E元素必须是某个元素元素,E父元素最高是html,即E可以是html元素,也就是说E可以是body 该选择符总是能命中父元素第n个为E元素,不论第n个子元素是否为...n个同级兄弟元素E 要使该属性生效,E元素必须是某个元素元素,E父元素最高是html,即E可以是html元素,也就是说E可以是body 该选择符总是能命中父元素倒数第n个为E元素,不论倒数第...(包括text节点元素E p:empty { height: 25px; border: 1px solid #ddd; background...--我是一个空节点p,请注意我与其它非空节点p外观有什么不一样--> 结构性伪类选择符 E:empty :checked CSS3 E:checked {

    2.9K40

    Babel 插件开发&访问节点

    访问节点 2.1 获取节点Path: 我们在处理节点属性之前必须要拿到节点对象才能进行操作,我们使用path.node.property来访问属性~ BinaryExpression(path)...(); 2.6 获取同级路径: 如果一个路径是在一个 Function/Program中列表里面,它就有同级节点。...使用path.inList来判断路径是否有同级节点, 使用path.getSibling(index)来获得同级路径, 使用 path.key获取路径所在容器索引, 使用 path.container...获取路径容器(包含所有同级节点数组) 使用 path.listKey获取容器key 这些API用于 babel-minify 中使用 transform-merge-sibling-variables...== '**') return; } 如果您在顶级路径中进行遍历,则可以使用2个提供API方法~ path.skip()跳过遍历当前路径子路径~ path.stop()完全停止遍历~ outerPath.traverse

    54730

    Xpath、Jsoup、Xsoup(我Java爬虫之二)

    XPath是一种表达式语言,它返回值可能是节点节点集合,原子值,以及节点原子值混合等。...选取当前节点父结点 @ 选取属性 实例 路径表达式 结果 bookstore 选取 bookstore 元素所有节点。 /bookstore 选取根元素 bookstore。...获取数据内容(例如:scriptstyle标签) tag() and tagName() 操作HTML和文本 append(String html), prepend(String html) appendText...el:多个选择器组合,查找匹配任一选择器唯一元素,例如:div.masthead, div.logo 伪选择器selectors :lt(n): 查找哪些元素同级索引值(它位置在DOM树中是相对于它节点...)小于n,比如:td:lt(3) 表示小于三列元素 :gt(n):查找哪些元素同级索引值大于n,比如: div p:gt(2)表示哪些div中有包含2个以上p元素 :eq(n): 查找哪些元素同级索引值与

    1.7K20

    【融职培训】Web前端学习 第2章 网页重构8 网页结构

    司马懿是一个节点,司马炎同样也是一个节点,这些节点是有关系,具体关系如下所示: 根节点:每一个树状结构都有一个没有父级节点,他被称作根节点。...父级节点:司马防是司马懿父级,司马懿是司马师父级。 节点:司马师是司马懿级,司马懿是司马防级。 同级关系:有相同父级节点就是同级关系,司马懿司马朗是同级,司马昭和司马亮是同级。...(这里需要注意是,司马炎司马熙不是同级,因为他们没有相同父级。) 二、html文件树状结构 html文件结构上面的家谱一样,也是树状结构,例如下面的html代码。 1 <!...,没有父级,所以他是整个树状结构节点,body标签中有h1标签ul标签,所以body是h1节点,h1是body节点,h1与ul是兄弟节点,又叫同级节点。...抛开节点之间关系,我们再给html节点分类,可以分成下面三类: 元素节点 文本节点 属性节点 在上面的代码中,每一个元素都是原始节点,第一个li中“香蕉”两个字就是文本节点,id就是属性节点

    36610

    MindManager2022序列号密钥解压安装程序教程

    zoneid=36726 快捷键大全 一、格式快捷键 ① Ctrl+B 将字体加粗 ② Ctrl+U对选定文本加下划线 ③ Ctrl+I使选定文本变成斜体 ④ Ctrl+Shift+.增加字体大小 ⑤...Ctrl+Shift+,减小字体大小 ⑥ Ctrl+Shift+F更改字体颜色 ⑦ Ctrl+Shift+S对选定文本应用删除线效果 ⑧ Ctrl+Shift+C填充所选主题背景颜色 ⑨ Ctrl+Space...将文件附加到主题,附加文件将储存于文档内部,并在主题中以可单击图标显示。 ⑧ Ctrl+T将便笺附加到主题。在便笺窗口中键入文本,或添加图片表格。 ⑨ Ctrl+Shift+B添加边界。...⑩ Ctrl+Shift+R在导图中两个主题之间插入关系。 11 Ctrl+Shift+J插入一个可用于容器或分隔器形状。 12 Ctrl+Shift+D将当前日期/或时间添加到主题或便笺。...) ⑦ Ctrl+Shift+V 粘贴为备注 ⑧ Delete 删除主题或对象 ⑨ Ctrl+Shift+Delete 删除选定主题(但保留主题) 七、导图级别过滤 ① F3 专注于主题 ② Ctrl

    9K10

    Jquery实现可拖拽树菜单「建议收藏」

    currentAId;                 curentParentAId = $($currentAId).parent().parent().prev().attr(“id”);  //获取当前节点节点...                      //移上节点节点                     var tmpDragingNodeString = tmpDragingNode.substring...if (currentParentUlId) {                                 //获取同级最后一个元素 【没有最后元素的话父节点图标变空】要节点为treeDemo                                ...、目录图标【不能移入自身节点Bug,移动时收起】                                                        var $tmpDragingNodeIcoId...,推断当前文件夹下是否有节点

    4.5K30

    XPath知识点梳理

    通过一次查找定位基本单元,叫做 步 (Step), 步功能,就是根据当前节点位置,给定它一个指定维度(即查找方向)相应一些参数,来获取节点或者节点集;   通过上面的一句话描述,应该可以知道一步基本组成部分有以下三个...descendant 选取当前节点所有后代元素(、孙等)。 descendant-or-self 选取当前节点所有后代元素(、孙等)以及当前节点本身。.../messages/message[1]/sender/following::* 查找第一个message节点sender节点所有同级节点,并对每一个同级节点递归向下查找。...(查找顺序为:先找到body节点顶级节点(根节点),得到根节点标签前所有同级节点,执行完成后继续向下一级,顺序得到该节点标签前所有同级节点,依次类推。)...(上例一个最大区别是:不从最顶层开始到body节点逐层查找。

    1.1K40

    Web前端学习 第2章 网页重构8 网页结构

    司马懿是一个节点,司马炎同样也是一个节点,这些节点是有关系,具体关系如下所示: 根节点:每一个树状结构都有一个没有父级节点,他被称作根节点。...父级节点:司马防是司马懿父级,司马懿是司马师父级。 节点:司马师是司马懿级,司马懿是司马防级。 同级关系:有相同父级节点就是同级关系,司马懿司马朗是同级,司马昭和司马亮是同级。...(这里需要注意是,司马炎司马熙不是同级,因为他们没有相同父级。) 二、html文件树状结构 html文件结构上面的家谱一样,也是树状结构,例如下面的html代码。 1 <!...,没有父级,所以他是整个树状结构节点,body标签中有h1标签ul标签,所以body是h1节点,h1是body节点,h1与ul是兄弟节点,又叫同级节点。...抛开节点之间关系,我们再给html节点分类,可以分成下面三类: 元素节点 文本节点 属性节点 在上面的代码中,每一个元素都是原始节点,第一个li中“香蕉”两个字就是文本节点,id就是属性节点

    51110
    领券