javascript - jstree: Select a node in jstree by name attribute rather than id - Stack Overflow

I need to select a node in the jstree by it's attribute name. Then after selecting that node I need to get it's id. Basically I want to get the id of a node given its name.

I tried the following code:

$("#tree1").bind("loaded.jstree", function (e, data) {

var isa_name = "ISA16469";

//$("#tree1").jstree("select_node", "#01"); //this code works but it selects by id, I want to select by attribute name

$("#tree1").jstree("select_node", $("li[name='" + isa_name + "']")); //doesn't work

var test = $('#tree1').jstree('get_selected').attr('id'); //get id of selected node
alert(test)

})

Your help is most wele. Thanks a lot

I need to select a node in the jstree by it's attribute name. Then after selecting that node I need to get it's id. Basically I want to get the id of a node given its name.

I tried the following code:

$("#tree1").bind("loaded.jstree", function (e, data) {

var isa_name = "ISA16469";

//$("#tree1").jstree("select_node", "#01"); //this code works but it selects by id, I want to select by attribute name

$("#tree1").jstree("select_node", $("li[name='" + isa_name + "']")); //doesn't work

var test = $('#tree1').jstree('get_selected').attr('id'); //get id of selected node
alert(test)

})

Your help is most wele. Thanks a lot

• javascript
• jquery
• jstree

Share Improve this question Follow asked Apr 23, 2015 at 10:47 KimKim 2,17666 gold badges3434 silver badges4646 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

When using an ID as selector (in jstree functions), do not supply a leading #, use the ID only.

As for the question - unfortunately that will not work, since jstree only keeps visible nodes in the DOM, meaning that if your LI node is not revealed (for example if its parent is closed) you will not be able to find it in the DOM.

I am not sure that having a name attribute on a LI node is valid, but anyway - if you insist on finding the node this way, you will have to traverse the internal jstree model. Here is how you do it: http://jsfiddle/DGAF4/450/

Here is a function that I have written from vakata's fiddle. Set 'MyAttribute' to your attribute. Pass 'MyAttribute's Value to the function and it will select your JSTree node by attribute.

//SELECT JSTREE by Attribute 
function selectNodeByMyAttribute (AttrValue) {
    $("#jstree").jstree().deselect_all(true);

    var instance = $("#jstree").jstree(true);
    var m = instance._model.data;
    for (var i in m) {
        if (m.hasOwnProperty(i) && i !== '#' && m[i].li_attr.MyAttribute && m[i].li_attr.MyAttribute === AttrValue) {
            instance.select_node(i);
            break;
        }
    }
}

i think it will help

<div id="jstree"></div>

$("#jstree").on('ready.jstree', function () {
var instance = $("#jstree").jstree(true);
var branchCont = instance._model.data;

for(var branchKey in branchCont) {

  var branch = branchCont[branchKey];
  if(branch.text && branch.text === "Child node 1") {

    instance.select_node(branchKey);
    break;
  }
}
});

$("#jstree").jstree({
'core' : {
    'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
        ]
        },
        { "text" : "Root node2", "children" : [
            { "text" : "Child node B1" },
            { "text" : "Child node B2" }
        ]
        }
    ]
}
});

https://jsfiddle/shubojs/qj8hty83/3/

You can get a flat array of all nodes and the search for the name without recursion to get the id of the node. This code will get you the last occurence of the node with the searched name.

var m = $("#tree1").jstree(true).get_json('#', {flat:true});
for(var i in m) {
      if(m[i].text === isa_name ) {
        myId =  m[i].id;
      }
 }