I'm using SortableJS and have a nested sortable list.
<ul id="nestedDemo" class="nested-sortable">
<li data-id="11">Item 1.1
<ul class="nested-sortable">
<li data-id="21">Item 2.1</li>
<li data-id="22">Item 2.2
<ul class="nested-sortable">
<li data-id="32">Item 3.2</li>
<li data-id="33">Item 3.3</li>
<li data-id="34">Item 3.4</li>
</ul>
</li>
<li data-id="23">Item 2.3</li>
<li data-id="31">Item 3.1</li>
<li data-id="24">Item 2.4</li>
</ul>
</li>
<li data-id="12">Item 1.2</li>
<li data-id="13">Item 1.3</li>
<li data-id="14">Item 1.4
<ul class="nested-sortable">
<li data-id="21">Item 2.1</li>
<li data-id="22">Item 2.2</li>
<li data-id="23">Item 2.3</li>
<li data-id="24">Item 2.4</li>
</ul>
</li>
<li data-id="15">Item 1.5</li>
</ul>
With the following script I get an JSON string with each that changed.
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
for( var i = 0; i < nestedSortables.length; i++ )
{
new Sortable( nestedSortables[i], {
group: 'nested',
dataIdAttr: 'data-id',
fallbackOnBody: true,
swapThreshold: 0.65,
store: {
set: function (evt) {
var order = evt.toArray();
console.log("Order: "+ JSON.stringify( order ) );
}
}
});
}
The problem is that I need the whole tree as an JSON string or array to store it and not only the values of the that have changes in.
How can I get an array with the whole tree?
You could store all nested sortables inside an array, and then get the order from each of them on set.
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
// ARRAY TO STORE ALL NESTED SORTABLES
const sortables = []
for (var i = 0; i < nestedSortables.length; i++) {
var sortable = Sortable.create(nestedSortables[i], {
group: 'nested',
dataIdAttr: 'data-id',
fallbackOnBody: true,
swapThreshold: 0.65,
store: {
set: function(sortable) {
// ITERATE EACH NESTED SORTABLE IN OUR ARRAY
for (let s of sortables) {
// GET THE ORDER OF THIS SORTABLE
let order = s.toArray();
console.log(order.join('|'));
}
}
}
});
// PUSH THE NEW SORTABLE IN OUR ARRAY
sortables.push(sortable)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<ul id="nestedDemo" class="nested-sortable">
<li data-id="11">Item 1.1
<ul class="nested-sortable">
<li data-id="21">Item 2.1</li>
<li data-id="22">Item 2.2
<ul class="nested-sortable">
<li data-id="32">Item 3.2</li>
<li data-id="33">Item 3.3</li>
<li data-id="34">Item 3.4</li>
</ul>
</li>
<li data-id="23">Item 2.3</li>
<li data-id="31">Item 3.1</li>
<li data-id="24">Item 2.4</li>
</ul>
</li>
<li data-id="12">Item 1.2</li>
<li data-id="13">Item 1.3</li>
<li data-id="14">Item 1.4
<ul class="nested-sortable">
<li data-id="21">Item 2.1</li>
<li data-id="22">Item 2.2</li>
<li data-id="23">Item 2.3</li>
<li data-id="24">Item 2.4</li>
</ul>
</li>
<li data-id="15">Item 1.5</li>
</ul>
I want to be able to compare two lists using data attribute in either Javascript or jQuery. I can't find an example of this anywhere and don't know how to go about it.
The first list is static and the second list is sortable. Once the user sorts the lists in the right order, [data-compare 1 to 4] in both lists, they click a button to check if they got the matches correct.
There are examples of setting the correct order 1 to X in a single list, but, none I can find to compare two lists.
The basic HTML:
<ul>
<li data-compare="1">Bananas</li>
<li data-compare="2">tomatoes</li>
<li data-compare="3">carrots</li>
<li data-compare="4">dates</li>
</ul>
<ul>
<li data-compare="1">Tree</li>
<li data-compare="4">Palm tree</li>
<li data-compare="2">Bush</li>
<li data-compare="3">In the ground</li>
</ul>
If an ordered list has data-compare attributes with the values 1, 2, 3, 4, you can just check if the the value of the data-compare is identical to the list item's index + 1:
function checkOrdered(list) {
return Array.from(list).every((item, i) => item.getAttribute('data-compare') == (i + 1));
}
console.log(checkOrdered(document.querySelectorAll('#list1 > li')));
console.log(checkOrdered(document.querySelectorAll('#list2 > li')));
<ul id="list1">
<li data-compare="1">Tree</li>
<li data-compare="4">Palm tree</li>
<li data-compare="2">Bush</li>
<li data-compare="3">In the ground</li>
</ul>
<ul id="list2">
<li data-compare="1">Tree</li>
<li data-compare="2">Bush</li>
<li data-compare="3">In the ground</li>
<li data-compare="4">Palm tree</li>
</ul>
You can do the same thing using another list as the compare basis:
function checkOrdered(list1, list2) {
return Array.from(list1).every((item, i) =>
item.getAttribute('data-compare') === list2[i].getAttribute('data-compare'));
}
const src = document.querySelectorAll('#src > li');
const target1 = document.querySelectorAll('#target1 > li');
const target2 = document.querySelectorAll('#target2 > li');
console.log(checkOrdered(src, target1));
console.log(checkOrdered(src, target2));
<ul id="src">
<li data-compare="1">Bananas</li>
<li data-compare="2">tomatoes</li>
<li data-compare="3">carrots</li>
<li data-compare="4">dates</li>
</ul>
<ul id="target1">
<li data-compare="1">Tree</li>
<li data-compare="4">Palm tree</li>
<li data-compare="2">Bush</li>
<li data-compare="3">In the ground</li>
</ul>
<ul id="target2">
<li data-compare="1">Tree</li>
<li data-compare="2">Bush</li>
<li data-compare="3">In the ground</li>
<li data-compare="4">Palm tree</li>
</ul>
You can first get two arrays with data-compare values and then use every method to check if each element is the same in both arrays.
const getData = arr => {
return arr.map(function() {
return $(this).attr('data-compare')
}).get();
}
const l1 = getData($('ul:nth-of-type(1) li'))
const l2 = getData($('ul:nth-of-type(2) li'))
const check = l1.every((e, i) => l2[i] == e);
console.log(check)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-compare="1">Bananas</li>
<li data-compare="2">tomatoes</li>
<li data-compare="3">carrots</li>
<li data-compare="4">dates</li>
</ul>
<ul>
<li data-compare="1">Tree</li>
<li data-compare="4">Palm tree</li>
<li data-compare="2">Bush</li>
<li data-compare="3">In the ground</li>
</ul>
I have this HTML:
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
I want to select this part:
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
The logic is the content of <h5> tag. I want the one which is specific text. Actually expected result is an array of both that name and that age. Some thing like this: var res = ['Peter', 19];.
But my code selects all those <ul>s:
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
});
How can I fix it?
You can use :contains() to find the H5 that contains the specific string you want. Then use .next() to get that ul associated with the h5
$("h5:contains('specific text')").next('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
console.log(res)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
Jquery script for getting data from ul list :
$('ul').map(function (){
var res = [$(this).find('li.name').text(), $(this).find('li.age').text()];
// console.log(res);
});
var htmVal = '';
$('h5').each(function(index){
htmVal = $(this).html();
if(htmVal == 'something else'){
var detail ={name:$(this).next().find('li.name').html(),age:$(this).next().find('li.age').html()};
console.log(detail);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h5>something</h5>
<ul>
<li class="name">John</li>
<li class="age">21</li>
</ul>
<h5>specific text</h5>
<ul>
<li class="name">Peter</li>
<li class="age">19</li>
</ul>
<h5>something else</h5>
<ul>
<li class="name">Ali</li>
<li class="age">62</li>
</ul>
The title is not really clear since I don't really know how to express that neither I know exactly where does the problem come from. I'm still new, and have spent a lot of hour on this without any result and I'm a bit getting desperate.
The idea is to render as does a select when you type a letter and heading to it into your select.
However for style purpose I do not use a select but a <ul> which has been stylised with overflow:scroll and a maximum height.
Have a look at this JsFiddle
I'm having a lot of trouble especially when I try to find good test to use.
This is what I have done so far : The code is comment so you can see the part working or not and what I thought of it.
Actually I'm not really sure of what is not working or what is especially blocking.
If you guys can give me a hint I would so appreciate !
$('.custom-select').click(function() {
var res = "";
document.onkeydown = f;
/* Create a String of what we are looking for;
works but not that beautiful (especially the part of e.preventDefault) */
function f(e) {
clearTimeout(f);
e.preventDefault();
e.stopPropagation();
if (e.keyCode == 8) {
res = res.slice(0, -1);
} else {
res += String.fromCharCode(e.keyCode);
if (res.length > 5) {
res = "";
}
}
console.log(res);
setTimeout(f, 3000);
}
/* Half working ? Not sure I'm using the right selector */
$(this).next($('.customSelect').find('li').each(function() {
if ($(this).innerText == res) {
/* Works (Just for scrool) */
$('.customSelect').animate({
scrollTop: $(this).offset().top
}, 500)
}
}))
})
Here is the HTML for understanding purpose
<div class="search-content">
<div class="relative">
<div class="custom-select">Sélectionnez un pays</div>
<ul class="customSelect" id="countries" name="countries">
<li class="title not" data-value="0">Top destinations</li>
<li data-value="1" onclick="setinfos('country',1);"> Andorre</li>
<li data-value="2" onclick="setinfos('country',2);"> Émirats Arabes Unis</li>
<li data-value="3" onclick="setinfos('country',3);"> Afghanistan</li>
<li data-value="4" onclick="setinfos('country',4);"> Antigua-et-Barbuda</li>
<li data-value="5" onclick="setinfos('country',5);"> Anguilla</li>
<li data-value="6" onclick="setinfos('country',6);"> Albanie</li>
<li data-value="7" onclick="setinfos('country',7);"> Arménie</li>
<li data-value="8" onclick="setinfos('country',8);"> Angola</li>
<li data-value="9" onclick="setinfos('country',9);"> Antarctique</li>
<li data-value="10" onclick="setinfos('country',10);"> Argentine</li>
<li data-value="11" onclick="setinfos('country',11);"> Samoa Américaines</li>
<li data-value="12" onclick="setinfos('country',12);"> Autriche</li>
<li data-value="13" onclick="setinfos('country',13);"> Australie</li>
<li data-value="14" onclick="setinfos('country',14);"> Aruba</li>
<li data-value="15" onclick="setinfos('country',15);"> Îles Åland</li>
<li data-value="16" onclick="setinfos('country',16);"> Azerbaïdjan</li>
<li data-value="17" onclick="setinfos('country',17);"> Bosnie-Herzégovine</li>
<li data-value="18" onclick="setinfos('country',18);"> Barbade</li>
<li data-value="19" onclick="setinfos('country',19);"> Bangladesh</li>
<li data-value="20" onclick="setinfos('country',20);"> Belgique</li>
<li data-value="21" onclick="setinfos('country',21);"> Burkina Faso</li>
<li data-value="22" onclick="setinfos('country',22);"> Bulgarie</li>
<li data-value="23" onclick="setinfos('country',23);"> Bahreïn</li>
<li data-value="24" onclick="setinfos('country',24);"> Burundi</li>
<li data-value="25" onclick="setinfos('country',25);"> Bénin</li>
<li data-value="26" onclick="setinfos('country',26);"> Saint-Barthélemy</li>
<li data-value="27" onclick="setinfos('country',27);"> Bermudes</li>
<li data-value="28" onclick="setinfos('country',28);"> Brunei</li>
<li data-value="29" onclick="setinfos('country',29);"> Bolivie</li>
<li data-value="30" onclick="setinfos('country',30);"> Bonaire</li>
<li data-value="31" onclick="setinfos('country',31);"> Brésil</li>
<li data-value="32" onclick="setinfos('country',32);"> Bahamas</li>
<li data-value="33" onclick="setinfos('country',33);"> Bhoutan</li>
<li data-value="34" onclick="setinfos('country',34);"> Île Bouvet</li>
<li data-value="35" onclick="setinfos('country',35);"> Botswana</li>
<li data-value="36" onclick="setinfos('country',36);"> Bélarus</li>
<li data-value="37" onclick="setinfos('country',37);"> Belize</li>
<li data-value="38" onclick="setinfos('country',38);"> Canada</li>
<li data-value="39" onclick="setinfos('country',39);"> Îles Cocos</li>
<li data-value="40" onclick="setinfos('country',40);"> République démocratique du Congo</li>
<li data-value="41" onclick="setinfos('country',41);"> Centrafrique</li>
<li data-value="42" onclick="setinfos('country',42);"> République du Congo</li>
<li data-value="43" onclick="setinfos('country',43);"> Suisse</li>
<li data-value="44" onclick="setinfos('country',44);"> Côte d'Ivoire</li>
<li data-value="45" onclick="setinfos('country',45);"> Îles Cook</li>
<li data-value="46" onclick="setinfos('country',46);"> Chili</li>
<li data-value="47" onclick="setinfos('country',47);"> Cameroun</li>
<li data-value="48" onclick="setinfos('country',48);"> Chine</li>
<li data-value="49" onclick="setinfos('country',49);"> Colombie</li>
<li data-value="50" onclick="setinfos('country',50);"> Costa Rica</li>
<li data-value="51" onclick="setinfos('country',51);"> Cuba</li>
<li data-value="52" onclick="setinfos('country',52);"> Cap-vert</li>
<li data-value="53" onclick="setinfos('country',53);"> Curaçao</li>
<li data-value="54" onclick="setinfos('country',54);"> Île Christmas</li>
<li data-value="55" onclick="setinfos('country',55);"> Chypre</li>
<li data-value="56" onclick="setinfos('country',56);"> République Tchèque</li>
<li data-value="57" onclick="setinfos('country',57);"> Allemagne</li>
<li data-value="58" onclick="setinfos('country',58);"> Djibouti</li>
<li data-value="59" onclick="setinfos('country',59);"> Danemark</li>
<li data-value="60" onclick="setinfos('country',60);"> Dominique</li>
<li data-value="61" onclick="setinfos('country',61);"> République Dominicaine</li>
<li data-value="62" onclick="setinfos('country',62);"> Algérie</li>
<li data-value="63" onclick="setinfos('country',63);"> Équateur</li>
<li data-value="64" onclick="setinfos('country',64);"> Estonie</li>
<li data-value="65" onclick="setinfos('country',65);"> Égypte</li>
<li data-value="66" onclick="setinfos('country',66);"> Sahara Occidental</li>
<li data-value="67" onclick="setinfos('country',67);"> Érythrée</li>
<li data-value="68" onclick="setinfos('country',68);"> Espagne</li>
<li data-value="69" onclick="setinfos('country',69);"> Éthiopie</li>
<li data-value="70" onclick="setinfos('country',70);"> Finlande</li>
<li data-value="71" onclick="setinfos('country',71);"> Fidji</li>
<li data-value="72" onclick="setinfos('country',72);"> Îles (malvinas) Falkland</li>
<li data-value="73" onclick="setinfos('country',73);"> Micronésie</li>
<li data-value="74" onclick="setinfos('country',74);"> Îles Féroé</li>
<li data-value="75" onclick="setinfos('country',75);"> France</li>
<li data-value="76" onclick="setinfos('country',76);"> Gabon</li>
<li data-value="77" onclick="setinfos('country',77);"> Royaume-Uni</li>
<li data-value="78" onclick="setinfos('country',78);"> Grenade</li>
<li data-value="79" onclick="setinfos('country',79);"> Géorgie</li>
<li data-value="80" onclick="setinfos('country',80);"> Guyane Française</li>
<li data-value="81" onclick="setinfos('country',81);"> Guernsey</li>
<li data-value="82" onclick="setinfos('country',82);"> Ghana</li>
<li data-value="83" onclick="setinfos('country',83);"> Gibraltar</li>
<li data-value="84" onclick="setinfos('country',84);"> Groenland</li>
<li data-value="85" onclick="setinfos('country',85);"> Gambie</li>
<li data-value="86" onclick="setinfos('country',86);"> Guinée</li>
<li data-value="87" onclick="setinfos('country',87);"> Guadeloupe</li>
<li data-value="88" onclick="setinfos('country',88);"> Guinée Équatoriale</li>
<li data-value="89" onclick="setinfos('country',89);"> Grèce</li>
<li data-value="90" onclick="setinfos('country',90);"> Géorgie du Sud et les Îles Sandwich du Sud</li>
<li data-value="91" onclick="setinfos('country',91);"> Guatemala</li>
<li data-value="92" onclick="setinfos('country',92);"> Guam</li>
<li data-value="93" onclick="setinfos('country',93);"> Guinée-Bissau</li>
<li data-value="94" onclick="setinfos('country',94);"> Guyana</li>
<li data-value="95" onclick="setinfos('country',95);"> Hong-Kong</li>
<li data-value="96" onclick="setinfos('country',96);"> Îles Heard et Mcdonald</li>
<li data-value="97" onclick="setinfos('country',97);"> Honduras</li>
<li data-value="98" onclick="setinfos('country',98);"> Croatie</li>
<li data-value="99" onclick="setinfos('country',99);"> Haïti</li>
<li data-value="100" onclick="setinfos('country',100);"> Hongrie</li>
<li data-value="101" onclick="setinfos('country',101);"> Indonésie</li>
<li data-value="102" onclick="setinfos('country',102);"> Irlande</li>
<li data-value="103" onclick="setinfos('country',103);"> Israël</li>
<li data-value="104" onclick="setinfos('country',104);"> Île de Man</li>
<li data-value="105" onclick="setinfos('country',105);"> Inde</li>
<li data-value="106" onclick="setinfos('country',106);"> Territoire britannique de l'océan Indien</li>
<li data-value="107" onclick="setinfos('country',107);"> Iraq</li>
<li data-value="108" onclick="setinfos('country',108);"> Iran</li>
<li data-value="109" onclick="setinfos('country',109);"> Islande</li>
<li data-value="110" onclick="setinfos('country',110);"> Italie</li>
<li data-value="111" onclick="setinfos('country',111);"> Jersey</li>
<li data-value="112" onclick="setinfos('country',112);"> Jamaïque</li>
<li data-value="113" onclick="setinfos('country',113);"> Jordanie</li>
<li data-value="114" onclick="setinfos('country',114);"> Japon</li>
<li data-value="115" onclick="setinfos('country',115);"> Kenya</li>
<li data-value="116" onclick="setinfos('country',116);"> Kirghizistan</li>
<li data-value="117" onclick="setinfos('country',117);"> Cambodge</li>
<li data-value="118" onclick="setinfos('country',118);"> Kiribati</li>
<li data-value="119" onclick="setinfos('country',119);"> Comores</li>
<li data-value="120" onclick="setinfos('country',120);"> Saint-Kitts-et-Nevis</li>
<li data-value="121" onclick="setinfos('country',121);"> Corée du Nord</li>
<li data-value="122" onclick="setinfos('country',122);"> Corée du Sud</li>
<li data-value="123" onclick="setinfos('country',123);"> Kosovo</li>
<li data-value="124" onclick="setinfos('country',124);"> Koweït</li>
<li data-value="125" onclick="setinfos('country',125);"> Îles Caïmanes</li>
<li data-value="126" onclick="setinfos('country',126);"> Kazakhstan</li>
<li data-value="127" onclick="setinfos('country',127);"> Laos</li>
<li data-value="128" onclick="setinfos('country',128);"> Liban</li>
<li data-value="129" onclick="setinfos('country',129);"> Sainte-Lucie</li>
<li data-value="130" onclick="setinfos('country',130);"> Liechtenstein</li>
<li data-value="131" onclick="setinfos('country',131);"> Sri Lanka</li>
<li data-value="132" onclick="setinfos('country',132);"> Libéria</li>
<li data-value="133" onclick="setinfos('country',133);"> Lesotho</li>
<li data-value="134" onclick="setinfos('country',134);"> Lituanie</li>
<li data-value="248" onclick="setinfos('country',248);"> Afrique du Sud</li>
<li data-value="249" onclick="setinfos('country',249);"> Zambie</li>
<li data-value="250" onclick="setinfos('country',250);"> Zimbabwe</li>
<li data-value="251" onclick="setinfos('country',251);"> Serbie-et-Monténégro</li>
<li data-value="252" onclick="setinfos('country',252);"> Antilles Néerlandaises</li>
</ul>
</div>
</div>
Here is an example where the list is filtered https://jsfiddle.net/xu83c23f/1/
function filterLiElements(text) {
$('#customSelect > li').each(function() {
if ($(this).text().toUpperCase().search(res) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
}
Ok so just in case someone is interested in the finality.
This is what it takes :
function search(res){
var matchedVille = [];
matchedVille = $('ul>li:not(.not)').filter(function(){
var regExp = new RegExp ("^ "+res.toLowerCase().sansAccent());
return this.innerHTML.toLowerCase().sansAccent().match(regExp);
});
return $(matchedVille[0]).position().top;
}
Precision : sansAccent() Is a function that remove accent.
function scrollToLi(res){
if(res != 0){
var offset = toScroll.position().top;
toScroll.scrollTop(res - offset);
}
}
And this is how it is call : scrollToLi(search(res)) with res a string created by adding key tapped.
And there you have a working example on jsFiddle
How can convert below DOM to JSON array which will have many more leafs in thefuture . I have tried a lot but didn't got any solution. I found this but it is not possible in my case.
HTML Code
<ul id="org1">
<li>
Main
<ul data-self="1">
<li data-self="2" data-parent="1">A
<ul data-self="2">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>
JSON Required is
{
1:{
2:{5,6,7,8,9,10},
3:{11,12,13,14}
}
}
Script
function recursive(dis)
{
$(this).find(' > ul ').each(function(){
params[$(this).attr('data-self')]=[];
var i=0;
$(this).find('li').each(function(){
if($(this).has('ul'))
{
params[$(this).attr('data-parent')][i++]=rec(this);
}else
{
params[$(this).attr('data-parent')][i++]=$(this).attr('data-self');
}
});
});
}
recursive('#org1');
console.log(params);
I would prefer something like the following. The 2 changes in the HTML you need to make are:
1) Add a class to your ul such as <ul data-self="2" class="nodes">. 2) Add a class to the wrapper ul such as <ul data-self="1" class="parent">.
var json = {};
$("#org1").find("ul.parent").each(function() {
var $this = $(this);
json[$this.data("self")] = {};
var $nodes = $this.find("ul.nodes");
$nodes.each(function() {
var children = $(this).find("li").map(function() {
return $(this).data("self")
}).get();
json[$this.data("self")][$(this).data("self")] = children;
});
});
alert (JSON.stringify(json));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="org1">
<li>
Main
<ul data-self="1" class="parent">
<li data-self="2" data-parent="1">A
<ul data-self="2" class="nodes">
<li data-self="5" data-parent="2">A1</li>
<li data-self="6" data-parent="2">A2</li>
<li data-self="7" data-parent="2">A3</li>
<li data-self="8" data-parent="2">A4</li>
<li data-self="9" data-parent="2">A5</li>
<li data-self="10" data-parent="2">A6</li>
</ul>
</li>
<li data-self="3" data-parent="1">B
<ul data-self="3" class="nodes">
<li data-self="11" data-parent="3">B1</li>
<li data-self="12" data-parent="3">B2</li>
<li data-self="13" data-parent="3">B3</li>
<li data-self="14" data-parent="3">B4</li>
</ul>
</li>
</ul>
</li>
</ul>