JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="temporary1"></div>
<div id="parents"></div>
<button id="getParents">Get parents of selected</button>

CSS

#selected, #getParents {
  margin-top:50px;
}

#parents {
  background: #ddd;
}

JavaScript

var data = [
     { "id" : "root", "parent" : "#", "text" : "Root", "state":{"opened":true} },
     { "id" : "cat1", "parent" : "root", "text" : "First Branch", "state":{"opened":true}  },
     { "id" : "cat01", "parent" : "cat1", "text" : "Cat 0.1.0" },
     { "id" : "cat02", "parent" : "cat1", "text" : "Cat 0.1.1" },
     { "id" : "cat03", "parent" : "cat1", "text" : "Cat 0.1.2" },
     { "id" : "cat2", "parent" : "#", "text" : "Second Branch", "state": {"opened":true}},
     { "id" : "cat11", "parent" : "cat2", "text" : "Cat 1.1.0" },
     { "id" : "cat12", "parent" : "cat2", "text" : "Cat 1.1.1"  },
     { "id" : "cat13", "parent" : "cat2", "text" : "Cat 1.1.2" }
]


$('#temporary1')
    .jstree({
    "core" : {
        "data" : data,
        "themes": {
            "url": true,
            "icons": true,
            "dots": true
        },
        'check_callback': true
    },
    "plugins": [ "checkbox" ]
 });  

$('#getParents').click( function(){
     function getParentNode(node) {        
         return $('#temporary1').jstree().get_parent(node);
     }
	   var nodes = $('#temporary1').jstree().get_selected('full'), parentNodes = [], parentTexts = [];
     nodes.forEach( function(node) {
          var parentNode = getParentNode(node);
          
          while (parentNode && parentNode !=='#') {
          		if (parentNodes.indexOf(parentNode) === -1 ) { 
                  parentNodes.push( parentNode );
                  parentTexts.push( $('#temporary1').jstree().get_node(parentNode).text );
              }
              parentNode = getParentNode(parentNode);
          }
     })

	//	 parentNodes.forEach( function(node) { $('#parents').append('<div>'+node+'</div>' ) } );
     parentTexts.forEach( function(node) { $('#parents').append('<div>'+node+'</div>' ) } );
     

    var checked_ids = [], checked_ids1 = [];
    $("#temporary1").find(".jstree-undetermined").each(
        function(i, element) {
            var nodeId =...