How to wrap jstree children with span so that i can group them

5

i wanted to wrap the whole children with span, so that i can give them background-color

i want wrap all children like below

  <span class="children-group-wrapper">

     <span>Group Child 1</span>

     <span>Group Child 2</span>

  </span>

Css:

span.children-group-wrapper{border:1px solid orange;}

i'm creating those 2 nodes Group Child 1 and Group Child 2 with below code:

$('#using_json_2').jstree().create_node('ajson2',  obj, "last");

Below is my Desired Output(think border as a perfect border):

Note: i don't want to use html jstree

var treeData = [

  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},

  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}

];



var childrenGroup = [

  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

   { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'},

    { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}

];



var myTree = $('#using_json_2').jstree({ 'core' : {

   "check_callback": true,

   'data' : treeData // Use it here

}});



myTree.on('changed.jstree', function(e, data) {

   childrenGroup.forEach(function(obj){

      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");

   });

    $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapper1{

   border:1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"> </div>

Please help me thanks in advance!!!!!!!!!!!

javascript jquery jstree

share|improve this question

edited Jan 3 at 11:29

asked Jan 1 at 17:53

user5405873

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You already have your desire output in snippet, what you want to do?
  
  – Just code
  Jan 2 at 4:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i want those 2 children to be wrapped with span with class="children-group-wrapper" so that i can give entire border as shown in image
  
  – user5405873
  Jan 2 at 5:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  please pardon me for border line in the image, consider it as a border for whole wrapper
  
  – user5405873
  Jan 2 at 5:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You want to apply the class on load of jstree or you want apply it onclick?
  
  – Just code
  Jan 2 at 5:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The below solution doesn't solve my problem of 2 groups separation, please provide your solution. Thanks in advance!!!
  
  – user5405873
  Jan 11 at 16:12
  
  
  

  
  
  
  

 | 
show 1 more comment

5

i wanted to wrap the whole children with span, so that i can give them background-color

i want wrap all children like below

  <span class="children-group-wrapper">

     <span>Group Child 1</span>

     <span>Group Child 2</span>

  </span>

Css:

span.children-group-wrapper{border:1px solid orange;}

i'm creating those 2 nodes Group Child 1 and Group Child 2 with below code:

$('#using_json_2').jstree().create_node('ajson2',  obj, "last");

Below is my Desired Output(think border as a perfect border):

Note: i don't want to use html jstree

var treeData = [

  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},

  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}

];



var childrenGroup = [

  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

   { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'},

    { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}

];



var myTree = $('#using_json_2').jstree({ 'core' : {

   "check_callback": true,

   'data' : treeData // Use it here

}});



myTree.on('changed.jstree', function(e, data) {

   childrenGroup.forEach(function(obj){

      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");

   });

    $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapper1{

   border:1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"> </div>

Please help me thanks in advance!!!!!!!!!!!

javascript jquery jstree

share|improve this question

edited Jan 3 at 11:29

asked Jan 1 at 17:53

user5405873

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You already have your desire output in snippet, what you want to do?
  
  – Just code
  Jan 2 at 4:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i want those 2 children to be wrapped with span with class="children-group-wrapper" so that i can give entire border as shown in image
  
  – user5405873
  Jan 2 at 5:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  please pardon me for border line in the image, consider it as a border for whole wrapper
  
  – user5405873
  Jan 2 at 5:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You want to apply the class on load of jstree or you want apply it onclick?
  
  – Just code
  Jan 2 at 5:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The below solution doesn't solve my problem of 2 groups separation, please provide your solution. Thanks in advance!!!
  
  – user5405873
  Jan 11 at 16:12
  
  
  

  
  
  
  

 | 
show 1 more comment

5

5

5

i wanted to wrap the whole children with span, so that i can give them background-color

i want wrap all children like below

  <span class="children-group-wrapper">

     <span>Group Child 1</span>

     <span>Group Child 2</span>

  </span>

Css:

span.children-group-wrapper{border:1px solid orange;}

i'm creating those 2 nodes Group Child 1 and Group Child 2 with below code:

$('#using_json_2').jstree().create_node('ajson2',  obj, "last");

Below is my Desired Output(think border as a perfect border):

Note: i don't want to use html jstree

var treeData = [

  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},

  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}

];



var childrenGroup = [

  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

   { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'},

    { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}

];



var myTree = $('#using_json_2').jstree({ 'core' : {

   "check_callback": true,

   'data' : treeData // Use it here

}});



myTree.on('changed.jstree', function(e, data) {

   childrenGroup.forEach(function(obj){

      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");

   });

    $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapper1{

   border:1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"> </div>

Please help me thanks in advance!!!!!!!!!!!

javascript jquery jstree

share|improve this question

edited Jan 3 at 11:29

asked Jan 1 at 17:53

user5405873

i wanted to wrap the whole children with span, so that i can give them background-color

i want wrap all children like below

  <span class="children-group-wrapper">

     <span>Group Child 1</span>

     <span>Group Child 2</span>

  </span>

Css:

span.children-group-wrapper{border:1px solid orange;}

i'm creating those 2 nodes Group Child 1 and Group Child 2 with below code:

$('#using_json_2').jstree().create_node('ajson2',  obj, "last");

Below is my Desired Output(think border as a perfect border):

Note: i don't want to use html jstree

var treeData = [

  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},

  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}

];



var childrenGroup = [

  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

   { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'},

    { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}

];



var myTree = $('#using_json_2').jstree({ 'core' : {

   "check_callback": true,

   'data' : treeData // Use it here

}});



myTree.on('changed.jstree', function(e, data) {

   childrenGroup.forEach(function(obj){

      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");

   });

    $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapper1{

   border:1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"> </div>

Please help me thanks in advance!!!!!!!!!!!

var treeData = [

  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},

  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}

];



var childrenGroup = [

  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

   { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'},

    { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}

];



var myTree = $('#using_json_2').jstree({ 'core' : {

   "check_callback": true,

   'data' : treeData // Use it here

}});



myTree.on('changed.jstree', function(e, data) {

   childrenGroup.forEach(function(obj){

      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");

   });

    $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapper1{

   border:1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"> </div>

var treeData = [

  { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"},

  { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"}

];



var childrenGroup = [

  { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

  { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'},

   { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'},

    { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}

];



var myTree = $('#using_json_2').jstree({ 'core' : {

   "check_callback": true,

   'data' : treeData // Use it here

}});



myTree.on('changed.jstree', function(e, data) {

   childrenGroup.forEach(function(obj){

      $('#using_json_2').jstree().create_node('ajson2',  obj, "last");

   });

    $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapper1{

   border:1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"> </div>

javascript jquery jstree

javascript jquery jstree

share|improve this question

edited Jan 3 at 11:29

asked Jan 1 at 17:53

user5405873

share|improve this question

edited Jan 3 at 11:29

asked Jan 1 at 17:53

user5405873

share|improve this question

share|improve this question

edited Jan 3 at 11:29

edited Jan 3 at 11:29

edited Jan 3 at 11:29

asked Jan 1 at 17:53

user5405873

asked Jan 1 at 17:53

user5405873

asked Jan 1 at 17:53

user5405873

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You already have your desire output in snippet, what you want to do?
  
  – Just code
  Jan 2 at 4:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i want those 2 children to be wrapped with span with class="children-group-wrapper" so that i can give entire border as shown in image
  
  – user5405873
  Jan 2 at 5:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  please pardon me for border line in the image, consider it as a border for whole wrapper
  
  – user5405873
  Jan 2 at 5:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You want to apply the class on load of jstree or you want apply it onclick?
  
  – Just code
  Jan 2 at 5:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The below solution doesn't solve my problem of 2 groups separation, please provide your solution. Thanks in advance!!!
  
  – user5405873
  Jan 11 at 16:12
  
  
  

  
  
  
  

 | 
show 1 more comment

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You already have your desire output in snippet, what you want to do?
  
  – Just code
  Jan 2 at 4:57
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i want those 2 children to be wrapped with span with class="children-group-wrapper" so that i can give entire border as shown in image
  
  – user5405873
  Jan 2 at 5:03
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  please pardon me for border line in the image, consider it as a border for whole wrapper
  
  – user5405873
  Jan 2 at 5:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You want to apply the class on load of jstree or you want apply it onclick?
  
  – Just code
  Jan 2 at 5:16
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The below solution doesn't solve my problem of 2 groups separation, please provide your solution. Thanks in advance!!!
  
  – user5405873
  Jan 11 at 16:12
  
  
  

  
  
  
  

You already have your desire output in snippet, what you want to do?

– Just code
Jan 2 at 4:57

You already have your desire output in snippet, what you want to do?

– Just code
Jan 2 at 4:57

i want those 2 children to be wrapped with span with class="children-group-wrapper" so that i can give entire border as shown in image

– user5405873
Jan 2 at 5:03

i want those 2 children to be wrapped with span with class="children-group-wrapper" so that i can give entire border as shown in image

– user5405873
Jan 2 at 5:03

please pardon me for border line in the image, consider it as a border for whole wrapper

– user5405873
Jan 2 at 5:04

please pardon me for border line in the image, consider it as a border for whole wrapper

– user5405873
Jan 2 at 5:04

You want to apply the class on load of jstree or you want apply it onclick?

– Just code
Jan 2 at 5:16

You want to apply the class on load of jstree or you want apply it onclick?

– Just code
Jan 2 at 5:16

The below solution doesn't solve my problem of 2 groups separation, please provide your solution. Thanks in advance!!!

– user5405873
Jan 11 at 16:12

The below solution doesn't solve my problem of 2 groups separation, please provide your solution. Thanks in advance!!!

– user5405873
Jan 11 at 16:12

 | 
show 1 more comment

1 Answer
1

active

oldest

votes

2

+50

You already have an id of the tree now, you can just add class to it and get it working.

$("#ajson2").addClass("children-group-wrapper")

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

if you want to apply the class to li you can use new supported property of the jstree

"li_attr": {

      "class": "children-group-wrapper"

    }

This will add the class attribute to li.

EDIT:

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

share|improve this answer

edited Jan 11 at 16:20

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?
  
  – user5405873
  Jan 2 at 7:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have Edited my Question Please see the Output
  
  – user5405873
  Jan 2 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me
  
  – user5405873
  Jan 2 at 7:44
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @EaB what is your expectation on that?
  
  – Just code
  Jan 2 at 7:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically
  
  – user5405873
  Jan 2 at 8:00
  
  
  

  
  
  
  

 | 
show 3 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997659%2fhow-to-wrap-jstree-children-with-span-so-that-i-can-group-them%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

2

+50

You already have an id of the tree now, you can just add class to it and get it working.

$("#ajson2").addClass("children-group-wrapper")

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

if you want to apply the class to li you can use new supported property of the jstree

"li_attr": {

      "class": "children-group-wrapper"

    }

This will add the class attribute to li.

EDIT:

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

share|improve this answer

edited Jan 11 at 16:20

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?
  
  – user5405873
  Jan 2 at 7:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have Edited my Question Please see the Output
  
  – user5405873
  Jan 2 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me
  
  – user5405873
  Jan 2 at 7:44
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @EaB what is your expectation on that?
  
  – Just code
  Jan 2 at 7:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically
  
  – user5405873
  Jan 2 at 8:00
  
  
  

  
  
  
  

 | 
show 3 more comments

2

+50

You already have an id of the tree now, you can just add class to it and get it working.

$("#ajson2").addClass("children-group-wrapper")

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

if you want to apply the class to li you can use new supported property of the jstree

"li_attr": {

      "class": "children-group-wrapper"

    }

This will add the class attribute to li.

EDIT:

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

share|improve this answer

edited Jan 11 at 16:20

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?
  
  – user5405873
  Jan 2 at 7:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have Edited my Question Please see the Output
  
  – user5405873
  Jan 2 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me
  
  – user5405873
  Jan 2 at 7:44
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @EaB what is your expectation on that?
  
  – Just code
  Jan 2 at 7:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically
  
  – user5405873
  Jan 2 at 8:00
  
  
  

  
  
  
  

 | 
show 3 more comments

2

+50

2

+50

2

+50

You already have an id of the tree now, you can just add class to it and get it working.

$("#ajson2").addClass("children-group-wrapper")

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

if you want to apply the class to li you can use new supported property of the jstree

"li_attr": {

      "class": "children-group-wrapper"

    }

This will add the class attribute to li.

EDIT:

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

share|improve this answer

edited Jan 11 at 16:20

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

You already have an id of the tree now, you can just add class to it and get it working.

$("#ajson2").addClass("children-group-wrapper")

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

if you want to apply the class to li you can use new supported property of the jstree

"li_attr": {

      "class": "children-group-wrapper"

    }

This will add the class attribute to li.

EDIT:

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node",

    

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2",

    

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o"

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o"    

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) { 

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

  $("#ajson2").addClass("children-group-wrapper")

});

.children-group-wrapper {

  border: 1px solid orange;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

var treeData = [{

    "id": "ajson1",

    "parent": "#",

    "text": "Simple root node"

  },

  {

    "id": "ajson2",

    "parent": "#",

    "text": "Root node 2"

  }

];



var childrenGroup = [{

    "id": "ajson3",

    "parent": "ajson2",

    "text": "Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperOpen"

    }

  },

  {

    "id": "ajson4",

    "parent": "ajson2",

    "text": "Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

    groupClass: 'children-group-wrapper1',

    "li_attr": {

      "class": "children-group-wrapperClosed"

    }

  },

  {

    "id": "ajson5",

    "parent": "ajson2",

    "text": "2nd Group Child 1",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Open"

    }

   

  },

  {

    "id": "ajson6",

    "parent": "ajson2",

    "text": "2nd Group Child 2",

    children: false,

    "icon": "fa fa-file-o",

     "li_attr": {

      "class": "children-group-wrapper1Closed"

    }

  }

];



var myTree = $('#using_json_2').jstree({

  'core': {

    "check_callback": true,

    'data': treeData // Use it here

  }

});



myTree.on('changed.jstree', function(e, data) {

  childrenGroup.forEach(function(obj) {

    $('#using_json_2').jstree().create_node('ajson2', obj, "last");

  });

  $('#using_json_2').jstree().open_node('ajson2');

});

.children-group-wrapperOpen {

  border: 1px solid orange;

  border-bottom: 0px;

}



.children-group-wrapperClosed {

  border: 1px solid orange;

  border-top: 0px;

}



.children-group-wrapper1Open {

  border: 1px solid red;

  border-bottom: 0px;

}



.children-group-wrapper1Closed {

  border: 1px solid red;

  border-top: 0px;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>





<div id="using_json_2"></div>

share|improve this answer

edited Jan 11 at 16:20

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

share|improve this answer

share|improve this answer

edited Jan 11 at 16:20

edited Jan 11 at 16:20

edited Jan 11 at 16:20

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

answered Jan 2 at 5:38

Just codeJust code

10.4k53167

10.4k53167

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?
  
  – user5405873
  Jan 2 at 7:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have Edited my Question Please see the Output
  
  – user5405873
  Jan 2 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me
  
  – user5405873
  Jan 2 at 7:44
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @EaB what is your expectation on that?
  
  – Just code
  Jan 2 at 7:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically
  
  – user5405873
  Jan 2 at 8:00
  
  
  

  
  
  
  

 | 
show 3 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?
  
  – user5405873
  Jan 2 at 7:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have Edited my Question Please see the Output
  
  – user5405873
  Jan 2 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me
  
  – user5405873
  Jan 2 at 7:44
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @EaB what is your expectation on that?
  
  – Just code
  Jan 2 at 7:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically
  
  – user5405873
  Jan 2 at 8:00
  
  
  

  
  
  
  

I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?

– user5405873
Jan 2 at 7:35

I have accepted your question but, if i want 2 more items having separate group for them below , Group Child 1, Group Child 2. how can i do it?

– user5405873
Jan 2 at 7:35

i have Edited my Question Please see the Output

– user5405873
Jan 2 at 7:39

i have Edited my Question Please see the Output

– user5405873
Jan 2 at 7:39

for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me

– user5405873
Jan 2 at 7:44

for 2nd Group Child 1,2nd Group Child 2 i want them in red border, Dynamically. please help me

– user5405873
Jan 2 at 7:44

@EaB what is your expectation on that?

– Just code
Jan 2 at 7:58

@EaB what is your expectation on that?

– Just code
Jan 2 at 7:58

i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically

– user5405873
Jan 2 at 8:00

i have group upload, so whichever is uploaded in a group i want to show them with different border i,e orange & red. please help me to make 2nd Group Child 1 & 2nd Group Child 2 in Red border Dynamically

– user5405873
Jan 2 at 8:00

 | 
show 3 more comments

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997659%2fhow-to-wrap-jstree-children-with-span-so-that-i-can-group-them%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here