Как обернуть детей с помощью span, чтобы я мог сгруппировать их

Question

Я хотел обернуть все children с span, чтобы я мог дать им цвет фона

Я хочу обернуть всех детей, как показано ниже

  <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;}

я создаю эти 2 узла Group Child 1 и Group Child 2 с кодом ниже:

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

Ниже приведен желаемый результат (представьте, что граница - это идеальная граница):

Примечание: я не знаюя не хочу использовать 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>

Пожалуйста, помогите мне заранее спасибо !!!!!!!!!!!

Answer 1

У вас уже есть идентификатор дерева, вы можете просто добавить к нему класс и заставить его работать.

$("#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>

Если вы хотите применить класс к li, вы можете использовать новое поддерживаемое свойство jstree

"li_attr": {
      "class": "children-group-wrapper"
    }

Это будетдобавить атрибут класса в li.

РЕДАКТИРОВАТЬ:

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>