I want a list of items in the tabulator in such a way that the sub-items are visible on clicking on that item. There is an onclick function for the column, but can I have on click for each element of the cell?
I want the column to look as follows:
Item 1
sub item 1
sub item 2
Item 2
sub item 3
sub item 4
The sub-items should be visible on clicking the corresponding Item
Using vanilla javascript and css, you can add one event listener to the document that checks if the clicked element is a li descended from the intended ul if so check for a child ul and toggle a class that will hide it like so:
document.addEventListener('click', function(event) {
if (event.target.matches('.collapsable-subs li')) {
let subList = event.target.querySelector('ul');
if (subList) {
subList.classList.toggle('collapsed')
}
}
}, false);
.collapsed {
display: none;
}
<ul class="collapsable-subs">
<li>Item 1
<ul class="collapsed">
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
<li>Item 2
<ul class="collapsed">
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5 with subs
<ul class="collapsed">
<li>sub item 1</li>
<li>sub item 2</li>
</ul>
</li>
</ul>
</li>
</ul>
This allows for nesting many levels deep and only affects ul descendants of .collapsable-subs in case you have other nested uls in the page. You can also have multiple ul.collapsable-subs that will all have the same behavior with no additional scripting and no need for onclick attributes.
Tabulator comes with built in functionality to handle nested data.
You have the option of Nested Data Trees
or Nested Tables
You could also use Custom Row Formatters to manipulate the rows in any way you see fit
Define the columns with cellClick and append child elements. Take a look at below sample column definition.
{
title: "Select",
field: "select",
width: 90,
cellClick: function(e, cell) {
//cell is the DOM element which is clicked
//..write logic to append more elements to expand view
}
}
You do not need to copy event method everywhere
function identify() {
console.log("Element:\n" +
event.srcElement.outerHTML +
"\nRow:" +
event.srcElement.parentElement.outerHTML)
}
function identify2() {
var me = event.srcElement, me2 = me;
while((me2 = me2.parentElement) && me2.tagName != "LI");
console.log("Element:\n" +
me.outerHTML);
if(me2) console.log("Parent:\n" + me2.outerHTML);
else console.log("Parent LI tag not found.");
}
<table onclick="identify()">
<tr>
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
</table>
<br/>
<ul onclick="identify2()">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Tabulator.prototype.extendModule("format", "formatters", {
bold: function (cell, formatterParams) {
return "<strong>" + cell.getValue() + "</strong>"; //make the contents of the cell bold
},
uppercase: function (cell, formatterParams) {
return cell.getValue().toUpperCase(); //make the contents of the cell uppercase
},
makelist: function (cell, formatterParams) {
var des = cell.getValue()
var table = ""
des = des.split('/')
table += '<ul>'
for (a = 0; a < des.length; a++) {
recs = des[a].split(':')
recs[0] = recs[0].replace(' ','')
table += '<li>' + recs[0]
comps = recs[1].split('+')
if (comps[0] == '') {
break;
}
table += '<ul>'
for (b = 0; b < comps.length; b++) {
table += '<li class="comp" hide="no">' + comps[b] + '</li>'
}
table += '</ul></li>'
}
table += '</ul>'
return table;
}
});
$('#table').on("click",'.comp',function(e){
if ($(this).attr("hide") == "no"){
var element = $(this)
var name = $(this).text()
var parent_name = $(this).parent().parent().text().split(' ')[0]
$.ajax({
url:'/get_sub_items',
method:'POST',
data: JSON.stringify({name:name, parent_name:parent_name}),
success: function(response){
console.log(response)
list = '<ul>'
for(j = 0 ; j < response.length; j++){
list += '<li> '+response[j]+'</li>'
}
list += '</ul>'
$(list).appendTo(element)
}
})
$(this).attr("hide", "yes")
}
else{
$(this).children().hide()
$(this).attr("hide", "no")
}
e.preventDefault();
})
Related
I'm working with the Docsify.js markdown parser framework and it automatically creates a sidebar from the headings in a document (unless you manually create a sidebar).
I have some CSS that numbers list elements, but want to convert it to JS as there are rendering issues when classes are added as the page scrolls (ie. adding .active).
Originally, I was trialling using this snippet but it doesn't output it as an auto incrementing hierarchical number system:
The sidebar that is generated is in the following format:
var li = document.getElementsByTagName( 'li' );
for( var i = 0; i < li.length; i++ ) {
var prefix = '1.';
li[i].innerHTML = prefix + ' Title ' + i;
prefix++;
}
<aside class="sidebar">
<div class="sidebar-nav">
<ul>
<li>Title 1</li>
<ul>
<li>Title 2</li>
<ul>
<li>Title 3</li>
<ul>
<li>Title 4</li>
<ul>
<li>Title 5</li>
<ul>
<li>Title 6</li>
</ul>
</ul>
</ul>
</ul>
</ul>
<li>Title 1</li>
<li>Title 1</li>
<ul>
<li>Title 2</li>
<li>Title 2</li>
<ul>
<li>Title 3</li>
<ul>
<li>Title 4</li>
<ul>
<li>Title 5</li>
<ul>
<li>Title 6</li>
</ul>
</ul>
</ul>
</ul>
</ul>
</ul>
</div>
</aside>
I understand the HTML structure isn't valid with <ul> being a descendant of an <ul> but this is the code that is outputted and I have no control over it.
However, I want to be able to number the headings with sections and sub-sections:
1. Title 1
1.1. Title 2
1.1.1. Title 3
1.1.1.1. Title 4
1.1.1.1.1. Title 5
1.1.1.1.1.1. Title 6
2. Title 1
3. Title 1
3.1. Title 2
3.2. Title 2
3.2.1. Title 3
3.2.1.1. Title 4
3.2.1.1.1. Title 5
3.2.1.1.1.1. Title 6
I am struggling to find a way to be able to target the first <li> (or the H1), and then being able to access the next <ul> via .nextElementSibling to continue the loop and prepend the numbering.
As far as I have gotten to at the moment is: document.querySelectorAll( 'div.sidebar-nav > ul' ) and it's not much to go on!
I think I'm really out of my depth for javascript here, and was hoping that I'd be able to get some help on being able to loop through the <li> and <ul> elements to prepend the numbers.
Following is JavaScript to apply nested index numbers. At max there are only 6 header tags, 6 levels, so we can use recursive solution:
let startLevel = 1;
let endLevel = 5;
function indexsify() {
let children = document.querySelectorAll('#sidebar > ul');
let numbers = new Array(7).fill(0);
let depth = 0;
children.forEach((element, index) => {
recurse(element, ++depth, numbers);
});
}
function recurse(element, depth, numbers) { //ul
let children = Array.from(element.children);
children.forEach((element, index) => {
if (element.localName.toUpperCase() === 'LI') {
numbers[depth]++;
addNumberString(element, depth, numbers);
} else if (element.localName.toUpperCase() === 'UL') {
if (depth < endLevel) {
recurse(element, depth + 1, numbers, startLevel);
numbers.fill(0, depth + 1); //reset all next numbers
}
}
});
}
function addNumberString(element, depth, numbers) {
let strNumber = "";
numbers.forEach((num, index) => {
if (index > depth || index <= startLevel) return;
strNumber += `${num}.`;
});
element.firstElementChild.innerText = strNumber +
element.firstElementChild.innerText;
}
indexsify();
ul,
li {
list-style-type: none;
}
<div id="sidebar">
<ul>
<li><a>Home</a></li>
<ul>
<li><a>Chapter a</a></li>
<ul>
<li><a> Section a</a></li>
<li><a>Section b</a></li>
</ul>
<li><a>Chapter b</a></li>
<li><a>Chapter c</a></li>
<ul>
<li><a>Section a</a></li>
<li><a>Section b</a></li>
<ul>
<li><a>Sub-section a</a></li>
</ul>
</ul>
<li><a>Chapter D</a></li>
</ul>
</ul>
</div>
Modify markdown itself: As per the Docsify plugin documentation there is no direct provision to influence the sidebar content. Your plugin uses hook.afterEach(function(html, next) and the sidebar is generated separately. So you are trying to manipulate generated sidebar also. You are trying to do similar operation two times.
Why not use hook.beforeEach(function(content) and manipulate markdown itself. That way you'll have to do the numbering operations only once.
Here is a demo site and the code sandbox link for following sample plugin that manipulates markdown content:
<!DOCTYPE html>
<html>
<body>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsify#4/themes/vue.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsify/themes/dark.css"
/>
<div id="app">Please wait...</div>
<script>
window.$docsify = {
el: "#app",
loadSidebar: true,
maxLevel: 4,
subMaxLevel: 5,
homepage: "readme.md"
};
</script>
<script>
//plugin
let myPlugin = function (hook, vm) {
hook.init(function () {
//remove '-' before Table of content entries
let customStyles = document.createElement("style");
customStyles.type = "text/css";
customStyles.textContent = `.app-sub-sidebar li::before {
content: '' !important;
padding-right: 4px;
float: left;
}`;
document.body.appendChild(customStyles);
});
//update markdown content before docsify parsing
hook.beforeEach(function (content) {
let lines = content.split("\n");
let numbers = new Array(6).fill(0);
let depth = 0;
lines.forEach((line, index) => {
let level = getLevel(line);
//if not a header continue to next line
if (level === -1) return;
if (level > depth) {
depth++; //increase depth
} else {
depth = level; //decrease depth
numbers.fill(0, depth + 1); //set all next depth to 0
}
numbers[depth]++;
let strNumber = "";
numbers.forEach((num, index) => {
if (index > depth || index < startLevel) return;
strNumber += `${num}.`;
});
if (depth < endLevel) {
lines[index] =
levels[level] + strNumber + line.substr(depth + 1, line.length);
}
});
//update original content
content = lines.join("\n");
return content;
});
let levels = ["# ", "## ", "### ", "#### ", "##### ", "###### "];
let startLevel = 1;
let endLevel = 4;
let regEx = new RegExp(`^#{1,${endLevel}}\\s+.*`);
function getLevel(line) {
if (!regEx.test(line)) return -1; //not a header line
if (line.startsWith(levels[0])) return 0; //h1
if (line.startsWith(levels[1])) return 1;
if (line.startsWith(levels[2])) return 2;
if (line.startsWith(levels[3])) return 3;
if (line.startsWith(levels[4])) return 4;
if (line.startsWith(levels[5])) return 5; //h6
}
};
window.$docsify.plugins = [myPlugin];
</script>
<script src="https://cdn.jsdelivr.net/npm/docsify#4"></script>
</body>
</html>
We need to override default CSS in hook.init(function ()) to remove leading - in table of contents.
Old answer: You can have numbers directly on anchors<a> tags :
.sidebar ul>li {
counter-increment: item;
}
.sidebar ul>li:first-child {
counter-reset: item;
}
.sidebar ul>li a::before {
content: counters(item, ".") " ";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify#4/themes/vue.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/themes/dark.css" />
<div id="app">Please wait...</div>
<script>
window.$docsify = {
el: "#app",
loadSidebar: false,
homepage: 'https://gist.githubusercontent.com/OnkarRuikar/bb1d986f279dddceea9004a4bde3844b/raw/80fe153d6b8c1bb2b8e7035be7df1bb908779061/readme.md'
}
</script>
<script src="https://cdn.jsdelivr.net/npm/docsify#4"></script>
If you generate numbers for titles in main section then they may get populated automatically in the sidebar. You can use markdown setting to write the script. Or you can try something like: https://github.com/markbattistella/docsify-autoHeaders
You want to "do something" to every child of the outer UL, depending on its type - either increment the index at the current level and then prepend a label, if it's an LI; or else recurse to the next level, if it's a UL. Given the HTML provided by the OP, this bit of code produces exactly the desired result:
function addLabels(element, prefix) {
var index = 0;
Array.from(element.children).forEach(element => {
if (element.localName.toUpperCase() === 'LI') {
index += 1;
element.innerText = prefix + index + '. ' + element.innerText;
} else if (element.localName.toUpperCase() === 'UL') {
addLabels(element, prefix + index + '.');
}
});
}
document.querySelectorAll('div.sidebar-nav > ul').forEach(
element => addLabels(element, '')
);
Also, you mentioned the idea of using nextElementSibling to get the UL's from the LI's. That would work, but I think you'd end up with code that is less robust, less performant, and not particularly clearer. But for the record, that could look something like this:
function addLabels2(element, prefix) {
Array.from(element.querySelectorAll(':scope > li')).forEach((element, index) => {
var label = prefix + (index+1) + '.';
var sibling = element.nextElementSibling;
element.innerText = label + ' ' + element.innerText;
if (sibling && sibling.localName.toUpperCase() === 'UL') {
addLabels2(sibling, label);
}
});
}
document.querySelectorAll('div.sidebar-nav > ul').forEach(
element => addLabels2(element, '')
);
I am basically trying to check if my submenu has more than five list items, and if it does grab the remaining list item's and place them inside a new ul that is outside of the current parent ul using jquery. it gets complicated because of the structure of the list.
Here is the DOM structure:
<ul id="nav" class="se test">
<li id="menu1" class="page-1307 parent-menu parent">
<div class="nav-inner">
<a class="menulink" id="menuitem1" onclick="return false" href="#">test<span class="toggle"></span></a>
<ul id="ie1" class="plain">
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li id="menu2" class="menulink page-7">
<div class="nav-inner">
test
</div>
</li>
</ul>
Basically i need to grab those remaining list items and place them in a new li.parent-menu.parent that includes the children div.sub-menu-wrapper and the ul.plain. the actual remaining list items would go inside the ul.plain of the new li.parent-menu. i hope thi makes since. i have been stuck on this for a day or two and unble to figure it out. any help would be greatly apprecitated, thank you.
This is what i am striving for, keep in mind it is dynamic.
you can:
Loop all ul in your document
foreach element count children
if found li number under an ul element is > 5
create a new list with the html of the required list
$(document).ready(function(){
$('.submenu-wrapper').each(function(){
var count_li=0;
var i=1;
$(this).children('ul').children('li').each(function(){
count_li++;
if(count_li>5 && i==1){
$(document.body).append('<ul id="newlist"></ul>');
$('#newlist').append($(this).nextUntil($(this).last()).andSelf());
i++;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="nav" class="se test">
<li id="menu1" class="page-1307 parent-menu parent">
<div class="nav-inner">
<a class="menulink" id="menuitem1" onclick="return false" href="#">test<span class="toggle"></span></a>
<ul id="ie1" class="plain">
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test11</li>
<li>test12</li>
<li>test13</li>
<li>test14</li>
<li>test15</li>
<li>test16</li>
<li>test17</li>
</ul>
</div>
</li>
<li class="parent-menu parent">test<span class="toggle"></span>
<div class="submenu-wrapper">
<ul class="plain">
<li>test21</li>
<li>test22</li>
<li>test23</li>
<li>test24</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li id="menu2" class="menulink page-7">
<div class="nav-inner">
test
</div>
</li>
</ul>
Here is the final answer I was looking for:
megaMenu: function(){
function addNewList(current, newItems) {
var newList = $('<li class="parent-menu parent newLi">');
var div = $('<div class="submenu-wrapper">');
newList.append(div);
var ul = $('<ul class="plain">');
div.append(ul);
for (var i = 0; i < newItems.length; i++) {
ul.append(newItems[i]);
}
current.after(newList);
return newList;
}
function splitLists() {
var allLists = $(".plain > li.parent-menu");
for (var i = 0; i < allLists.length; i++) {
var currentList = $(allLists[i]);
var items = currentList.find("li");
if (items.length > 5) {
var temp = [];
for (var j = 5; j < items.length; j++) {
temp.push($(items[j]));
if (temp.length == 5) {
currentList = addNewList(currentList, temp);
temp = [];
}
}
if (temp.length > 0) {
currentList = addNewList(currentList, temp);
}
}
}
}
splitLists();
}
After some clarification via comments it seems you are looking for something like this. I have commented the code to explain the logic behind the process:
// function for adding a new LI item.
function addNewList(current, newItems) {
// Create the new li node.
var newList = $('<li class="parent-menu parent">');
// Add the initial a link.
newList.append('test<span class="toggle"></span>');
// Create and append the submenu-wrapper div to our new list item.
var div = $('<div class="submenu-wrapper">');
newList.append(div);
// Create and append the new ul node to our submenu-wrapper div.
var ul = $('<ul class="plain">');
div.append(ul);
// Loop the 5 (or less) items that have been specified and add them to our new list.
for (var i = 0; i < newItems.length; i++) {
// Using append will move the elements that already exist in the original place.
ul.append(newItems[i]);
}
// Add our new list item to the DOM.
current.after(newList);
return newList;
}
// Base function to split the lists as required.
function splitLists() {
// Get all the lists that we want to process.
var allLists = $(".plain > li.parent-menu");
// Loop each list and process.
for (var i = 0; i < allLists.length; i++) {
var currentList = $(allLists[i]);
// Get the sub-items that we need to split.
var items = currentList.find("li");
// We only care about lists that are more than 5 items.
if (items.length > 5) {
// Create array to store the items that we want to move (any after first 5)
var temp = [];
// Start at the 6th item an start moving them in blocks of 5.
for (var j = 5; j < items.length; j++) {
// Add the item to move to our temp array.
temp.push($(items[j]));
// If we have 5 in our temp array then move them to new list.
if (temp.length == 5) {
// Move items with helper function.
currentList = addNewList(currentList, temp);
// Clear the temp array ready for the next set of items.
temp = [];
}
}
// If we have any spare ones that didn't get handle in the length == 5 check, then process them now.
if (temp.length > 0) {
currentList = addNewList(currentList, temp);
}
}
}
}
// Run the process.
splitLists();
Here is a working example
I am having issues making my lists interact the way I need them to.
I need to keep the functionality I currently have While adding in two more key parts.
I have been unsuccessful at adding these parts without losing current functionality, or completely breaking the application.
I need to be able to select/deselect all the children elements by clicking the parent.
I need the lists to be collapsible, and When a parent has a child on the second list I need the parent's name to be above the children on that list.
If all children are off the list on the right then the parent shouldn't appear there, however the parent should always be on the left.
The issue I've really been running into is that to make it collapsible I've been trying to use check boxes, and hide the styling, but none of that worked, and you'll see why. code below.
In summary
Collapsible Lists
Select/Deselect all children by clicking parent
parent id appears on left list if 1 or more children are on it.
Fiddle
HTML:
<div class="half">
<ol id="one">
<li id="alaska">
Alaska
<ul>
<li data-id="alaska"><input type="checkbox"> Children 1</li>
<li data-id="alaska"><input type="checkbox"> Children 2</li>
<li data-id="alaska"><input type="checkbox"> Children 3</li>
</ul>
</li>
<li id="washington">
Washington
<ul>
<li data-id="washington"><input type="checkbox"> Children 1</li>
<li data-id="washington"><input type="checkbox"> Children 2</li>
<li data-id="washington"><input type="checkbox"> Children 3</li>
</ul>
</li>
<li id="texas">
Texas
<ul>
<li data-id="texas"><input type="checkbox"> Children 1</li>
<li data-id="texas"><input type="checkbox"> Children 2</li>
<li data-id="texas"><input type="checkbox"> Children 3</li>
</ul>
</li>
</ol>
<button type="button" class="include">Include</button>
</div>
<div class="half">
<ol id="two"></ol>
<button type="button" class="exclude">Exclude</button>
</div>
CSS:
.half {
display:block;
float:left;
width:50%;
}
JavaScript:
$(function(){
$('.include').click(function(e){
var $checks = $("input:checked");
$.each($checks, function(k,v){
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#two').append(element);
});
});
$('.exclude').click(function(e){
var $checks = $("input:checked");
$.each($checks, function(k,v){
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#one').find('#'+tempid+' ul').append(element);
});
});
});
Fiddle
Update
Here is an updated demo https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/19/
Made few changes to .exclude method
$('.exclude').click(function(e) {
var $checks = $("input:checked");
$.each($checks, function(k, v) {
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#one').find('#' + tempid + ' ul').append(element);
var items = $('#two #' + tempid + '-2').children('li');
if (items.length == 3 || items.length == 0) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
});
});
Here is a demo https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/16/
Something like this should do
HTML structure would look like this
I changed it a bit to accommodate collapse and checking all children.
<li id="alaska">
<span class="parent">Alaska</span>
<span class="collapse">collapse</span>
<ul>
<li data-id="alaska">
<input type="checkbox">Children 1</li>
<li data-id="alaska">
<input type="checkbox">Children 2</li>
<li data-id="alaska">
<input type="checkbox">Children 3</li>
</ul>
</li>
Include script
$('.include').click(function(e) {
var $checks = $("input:checked");
$.each($checks, function(k, v) {
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
if (!$('#two #' + tempid + '-2').length) {
var ol = $('<ol></ol>').attr('id', tempid + '-2');
var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
ol.prepend(heading);
$('#two').append(ol);
}
$('#two #' + tempid + '-2').append(element);
if ($('#two #' + tempid + '-2').children('li').length == 3) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
});
});
When the include button is clicked the script will create a new ordered list based on the checkboxes that are selected. The new ordered lists under #two would look like this #alaska-2. This is achieved by
if (!$('#two #' + tempid + '-2').length) { // check if alaska-2 is present
var ol = $('<ol></ol>').attr('id', tempid + '-2');
var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
ol.prepend(heading);
$('#two').append(ol);
}
Apart from creating a new ordered list #alaska-2 that script would add a span which would be the name of the parent and it would have an id like #alaska-2-heading.
If all the children are selected then the heading would be hidden which is achieved by this script (which is the same in exclude script too)
if ($('#two #' + tempid + '-2').children('li').length == 3) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
exclude script
$('.exclude').click(function(e) {
var $checks = $("input:checked");
$.each($checks, function(k, v) {
var tempid = $(this).parent().data('id');
var element = $(this).parent().detach();
$('#one').find('#' + tempid + ' ul').append(element);
if ($('#two #' + tempid + '-2').children('li').length == 3) {
$('#two #' + tempid + '-2-heading').hide();
} else {
$('#two #' + tempid + '-2-heading').show();
}
});
});
check all children
$('#one span.parent').on('click', function() {
var checked = $(this).parent().find('input').prop('checked');
$(this).parent().find('input').prop('checked', !checked);
});
collapse children
$('#one span.collapse').on('click', function() {
$(this).parent().find('ul').slideToggle();
});
Here's the fiddle solution: https://jsfiddle.net/hb9j8ua7/1/
I'll explain the important bits here.
HTML for single list item
<li id="alaska">
<span class="title">Alaska</span><span class="collapse">(V)</span>
<ul>
<li data-id="alaska"><input type="checkbox" /> Children 1</li>
<li data-id="alaska"><input type="checkbox" /> Children 2</li>
<li data-id="alaska"><input type="checkbox" /> Children 3</li>
</ul>
</li>
I've added wrapped the title in a title span, and added a button to toggle collapse of the list.
JS for include
$('.include').click(function(e){
var $checks = $("#one input:checked");
$.each($checks, function(k,v){
var $parent = $(this).parent();
var tempid = $parent.data('id');
var element = $parent.detach();
element.prepend('<span class="state-name">' + tempid + '</span><br>');
$('#two').append(element);
});
});
Refactored a bit to capture the parent in a variable only once. Prepended a span classed state-name to display the state name above the included children.
JS for collapse and auto-select
$('.collapse').click(function() {
$(this).siblings('ul').slideToggle();
});
$('.title').click(function() {
$(this).siblings('ul').find('input').each(function() {
$(this).attr('checked', true);
});
});
Clicking the collapse button will open and close the sibling ul
Clicking the title will mark all children checkboxes as checked.
I believe this takes care of all the issues you were facing.
I want to append the <li> from one <ul> to another <ul> that's created on the fly. I want to group the list-items into new sub-lists based on their data-group attribute.
<ul id="sortable1">
<li data-group="A">test</li>
<li data-group="A">test1</li>
<li data-group="B">test2</li>
<li data-group="B">test3</li>
<li data-group="C">test4</li>
</ul>
Basically I'm trying to loop through this list and grap all <li> from each group, and then move it to another <ul>.
This is what I have so far, but I'm not getting the expected results. I have done this in Excel in the past but can't get it to work with jQuery.
var listItems = $("#sortable1").children("li");
listItems.each(function (idx, li) {
var product = $(li);
//grab current li
var str = $(this).text();
if (idx > 0) {
//append li
str += str;
if ($(this).data("group") != $(this).prev().data("group")) {
//I should be getting test and test1.
//but alert is only giving test1 test1.
alert(str);
//need to break into groups
//do something with groups
}
}
});
How about something like this:
$(function() {
var sortable = $("#sortable1"),
content = $("#content");
var groups = [];
sortable.find("li").each(function() {
var group = $(this).data("group");
if($.inArray(group, groups) === -1) {
groups.push(group);
}
});
groups.forEach(function(group) {
var liElements = sortable.find("li[data-group='" + group + "']"),
groupUl = $("<ul>").append(liElements);
content.append(groupUl);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sortable1">
<li data-group="A">test</li>
<li data-group="A">test1</li>
<li data-group="B">test2</li>
<li data-group="B">test3</li>
<li data-group="C">test4</li>
</ul>
<div id="content">
</div>
I hope I didn't misunderstand you.
I know this is a pretty basic question I just seem to be having some issues doing it. I have a HTML structure like below.
<ul>
<li>
<ul class=t2 id=15>
<li class='item'>a<span class='val'>b</span></li>
<li class='item'>c<span class='val'>d</span></li>
<li class='item'>e<span class='val'>f</span></li>
<li class='item'>parameters : </li>
<li>
<ul class=t3 id=16>
<li>
<ul class=t4 id=17></ul>
</li>
<li>
<ul class=t4 id=18></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have the UL with the id of 16 selected and I want to select all its child ul nodes and grab there id. I am able to select the ul with an id of 17 but I cannot grab it's sister node. Here is the JavaScript I am using to get the child nodes.
if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length >= 1) {
var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
for (var k = 0; k <= tag.length; k++) {
console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
}
}
So the logic should be, the the selected UL has child ULs get the ID of those ULs and print them to the console.
The above code does not work. I believe that is because it is grabbing the which does not have a id. But it also if I change it to k < tag.length it works, but still only gets 17 and I want to it get 18 as well.
Please help. Thanks in advance.
UPDATED, full function. the items array is an array of objects with html and id properties, toDelete is an array with just numbers (ids of items to be deleted. The html in items.html corresponds to one line of html. IE 'ab'. The function is a bit of a mess since I am just trying to get it to work properly. I know I can make it cleaner, that is why I did not post the whole function.
deleteItems: function () {
for (var i = 0; i < this.toDelete.length; i++) {
console.log("Item to be deleted: " + this.toDelete[i]);
for (var j = 0; j < this.items.length; j++) {
if (this.items[j].id == this.toDelete[i]) {
this.items[j] = ""; //this should be a slice
if (document.getElementById(this.toDelete[i]).getElementsByTagName('ul').length >= 1) {
var tag = document.getElementById(this.toDelete[i]).getElementsByTagName('ul');
for (var k = 0; k <= tag.length; k++) {
console.log("tag name: " + tag[k].id + " these will be pushed to Delete");
}
this.toDelete.push(document.getElementById(this.toDelete[i]).getElementsByTagName('ul')[0].id);
//check to see if it has those there sister nodes.
}
}
}
}
},
You can use children to get each child node, and then you can check to ensure the found node is a ul by using JavaScript's nodeName. To be extra safe I used toLowerCase() to guarantee that the nodeName looks like ul and not UL
deletedItems();
function deletedItems() {
var ulChildren = document.getElementById('ul16').children;
var childrenLength = ulChildren.length;
alert(childrenLength);
for(var i = 0; i < childrenLength; i++){
if(ulChildren[i].children[0].nodeName.toLowerCase() === 'ul'){
alert("found one, the id is: " + ulChildren[i].children[0].id);
}
}
}
Live Example
Also, I modified your HTML a bit:
<ul>
<li>
<ul class=t2 id=15>
<li class='item'>a<span class='val'>b</span></li>
<li class='item'>c<span class='val'>d</span></li>
<li class='item'>e<span class='val'>f</span></li>
<li class='item'>parameters : </li>
<li>
<ul class="t3" id="ul16">
<li>
<ul class=t4 id="ul17"></ul>
</li>
<li>
<ul class="t4" id="ul18"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>