jstree jquery how to iterate through all nodes

Question

I'm trying to iterate through every node within a treeview in jstree. The treeview is 4 levels deep but I can't seem to get past the 1st level. The following is the jQuery used to iterate.

$("#myTree").bind('ready.jstree', function (event, data) {
    $('#myTree li').each(function () {
        // Perform logic here
        }
    });
});

Here is a jsfiddle illustrating my point. Please help on how I can iterate through every node in jstree.

Inspecting the code the return of a single `li` seems to be caused by the abstraction of jsTree. When your listener fires the `#myTree` actually only contains one single `li`. — E. Sundin, Jan 27 '16 at 17:08
How would I be able to accommodate for multiple li where the treeview is dynamic? — Hshdj122, Jan 27 '16 at 17:14
You have several answers which provides a solution. Consider marking an answer as accepted if it seems as a complete solution to your question. — E. Sundin, Jan 27 '16 at 18:08

E. Sundin · Accepted Answer · 2016-01-27T17:36:06.027

This gets all the children of your tree in a flat array for your .each loop.

$("#tree").bind('ready.jstree', function(event, data) {
  var $tree = $(this);
  $($tree.jstree().get_json($tree, {
      flat: true
    }))
    .each(function(index, value) {
      var node = $("#tree").jstree().get_node(this.id);
      var lvl = node.parents.length;
      var idx = index;
      console.log('node index = ' + idx + ' level = ' + lvl);
    });
});

JSFiddle - Docs for get_json

score 8 · Answer 2 · answered Jan 27 '16 at 17:34

Another way is to open them before trying to access nodes in dom and then close them:

$("#tree").bind('ready.jstree', function (event, data) {
  $(this).jstree().open_all(); // open all nodes so they are visible in dom
    $('#tree li').each(function (index,value) {
        var node = $("#tree").jstree().get_node(this.id);
        var lvl = node.parents.length;
        var idx = index;
        console.log('node index = ' + idx + ' level = ' + lvl);
    });
    $(this).jstree().close_all(); // close all again
});

score 4 · Answer 3 · answered Mar 12 '16 at 15:45

4

"Nodes" is an overloaded term. Do you mean the HTML nodes or just the JSON data used to define each node in the jstree? I had a need to iterate through the jstree in order to extract the value for the ID field in each jstree node. If that's all you need, there's a simpler approach:

var v =$("#tree").jstree(true).get_json('#', {'flat': true});
for (i = 0; i < v.length && i < 10; i++) {
    var z = v[i];
    alert("z[id] = " + z["id"]);
}

answered Mar 12 '16 at 15:45

John Strong

1,844
1
15
24

"Do you mean the HTML nodes or just the JSON data used to define each node in the jstree?" This is an important distinction which had me confused until you spelled out the question. Thanks. – David Alan Condit Apr 26 '17 at 22:13

score 4 · Answer 4 · answered Jun 05 '17 at 12:36

I wanted a library-way of iterating over the nodes of a jsTree, so I wrote this into the jstree.js file:

each_node: function(callback) {
    if (callback) {
        var id, nodes = this._model.data;
        for (id in nodes) {
            if (nodes.hasOwnProperty(id) /*&& id !== $.jstree.root*/) {
                callback.call(this, nodes[id]);
            }
        }
    }
},

(Note: I'm using jsTree 3.3.4, and I've inserted the above code on line 3712 right after the get_json function definition.)

In code, I can iterate through the nodes of the tree like this:

$("#myTree").jstree(true).each_node(function (node) {
    // 'this' contains the jsTree reference

    // example usage: hide leaf nodes having a certain data attribute = true
    if (this.is_leaf(node) && node.data[attribute]) {
        this.hide_node(node);
    }
});

score 0 · Answer 5 · answered Jun 08 '21 at 10:19

var jsonNodes = $('#jstree').jstree(true).get_json('#', { flat: true });
 $.each(jsonNodes, function (i, v) {
     if (true) {
          // Following line will hide the check box on some condition    
          // $("#" + v.id + "_anchor i.jstree-checkbox").toggle(false);
          // it will print the id
           console.log(v.id);
                 }
            });

jstree jquery how to iterate through all nodes

5 Answers5

Linked