We Keep Coding

Prepend / prefix text to list items without class or id tags

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, '')
);

List of items in a column tabluator

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

jQuery autocomplete submenu (create unordered-list in unordered-list)

I have a problem with jQuery autocomplete. On keydown, the selected item isn't "Item1", it would be the full unordered-list including span and the ul.
<ul>
<li>
<span>Items</span>
<ul>
<li><a>Item1</a></li>
<li><a>Item2</a></li>
</ul>
</li>
<li>
<span>Cars</span>
<ul>
<li><a>Car1</a></li>
<li><a>Car2</a></li>
</ul>
</li>
<li>
<span>Test</span>
<ul>
<li><a>Test1</a></li>
<li><a>Test2</a></li>
</ul>
</li>
</ul>
Problem is:
On keydown -> menufocus: ui.item.data("ui-autocomplete-item") -> ui.item is undefined (in jquery.ui.js file)
ul-parameter in menufocus is full list of "Items" (<ul><li><a>Item1</a></li><li>...</li></ul>).
What I want: On keydown select Item1, next Item2, next Car1, Car2 and so on...
_renderMenu:
$.each( items, function( index, item ) {
...
if ( item.category != currentCategory ) {
categoryIndex++;
//Create "li"s for every category and append a span and the new ul to it.
var myLi = "<li class='ui-autocomplete-category'><span class='ui-autocomplete-category-head'><i class='" + category.icon + "'></i> " + category.name + "</span></li>";
var myLi = $(myLi).removeData("item.autocomplete-item");
myLi.append("<ul class='ui-autocomplete-inner-ul' role='listbox' aria-labelledby='cat" + categoryIndex + "' id='innerUlCat"+categoryIndex+"' aria-readonly='true'>");
var myUl = ul.append(myLi);
currentCategory = item.category;
}
var currentUl = $(ul).find("#innerUlCat"+categoryIndex) || ul;
li = that._renderItemData( currentUl, item );
});
_renderItemData: return this._renderItemOwn( ul, item );
_renderItemOwn:
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append( "<a class='ui-autocomplete-item'>" + item.label + "</a>" )
.appendTo( ul );
In _renderItemOwn i added the data "ui-autocomplete-item" but it doesn't work.
Are there any solutions? Thank you!

radomize ul tag not working

this is probably an easy question for you guys but I'm very new to coding and can't figure out this. I have a code that I want to randomize the given choices in the questions, and I've found a script online that does that but it's not working. I don't know what the
// shuffle only elements that don't have "group" class
$ul.find("li[class!='single_question', 'question', 'title', 'text']").each(function() {
means so I tried to put all id that I don't need to randomize in it but it's still not working.
Can someone help me this please? Also is there anyway I can add choice "A", choice "B", choice "C", and choice "D" in front of each given options so even after the options(answers) are randomized, the A,B,C,D options will still be in order? Thank you. Here's the code:
HTML:
<!DOCTYPE html>
<html>
<body>
<script src="JQ.js"></script>
<script src="function.js"></script>
<link href="style.css" rel="stylesheet" />
<div id="quiz_container">
<ul class="quiz_container">
<li class="single_question" data-question-id="1" data-correct-answer="1">
<div class="question">
<h1 class="title">P.1 Grammar Review</h1>
<p class="text">1. "What is your name__"</p>
</div>
<ul class="options">
<li value="1">?</li>
<li value="2">.</li>
<li value="3">,</li>
</ul>
<div class="result"></div>
</li>
<li class="single_question" data-question-id="2" data-correct-answer="b">
<div class="question">
<p class="text">2. "Do you like the banana__"</p>
</div>
<ul class="options">
<li value="a">.</li>
<li value="b">?</li>
<li value="c">,</li>
</ul>
<div class="result"></div>
</li>
</div>
</body>
</html>
JS:
$(document).ready(function () {
/*
* shuffles the array
* #param {Array} myArray array to shuffle
*/
function shuffleArray(myArray) {
for (var i = myArray.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = myArray[i];
myArray[i] = myArray[j];
myArray[j] = temp;
}
return myArray;
}
var $ul, $li, li_content, li_list;
// find all lists to shuffle
$("#quiz_container > ul").each(function () {
$ul = $(this);
li_list = [];
// shuffle only elements that don't have "group" class
$ul.find("li[class!='single_question', 'question', 'title', 'text']").each(function () {
// add content to the array and remove item from the DOM
li_list.push($(this).html());
$(this).remove();
});
// shuffle the list
li_list = shuffleArray(li_list);
while (li_content = li_list.pop()) {
// create <li> element and put it back to the DOM
$li = $("<li />").html(li_content);
$ul.append($li);
}
});
$("#contact_div").show();
});
$(document).on('click', '.single_question .options li', function () {
// Save the question of the clicked option
question = $(this).parents('.single_question');
// Remove If Anyother option is already selected
question.find('.selected').removeClass('selected');
// Add selected class to the clicked li
$(this).addClass('selected');
// selected option value
selected_answer_value = $(this).attr("value");
// Value of correct answer from '.single-question' attribute
correct_answer_value = question.attr("data-correct-answer");
correct_answer_text = question.find('.options').find("li[value='" + correct_answer_value + "']").text();
if (correct_answer_value == selected_answer_value)
result = "<div class='correct'> Correct ! </div>";
else
result = "<div class='wrong'> Correct answer is -> " + correct_answer_text + "</div>";
// Write the result of the question
$(this).parents('.single_question').find('.result').html(result);
// Calculate the score
score_calculator();
});
/**
* It loops through every question and increments the value when "data-correct-answer" value and "option's value" are same
*/
function score_calculator() {
score = 0;
$('.single_question').each(function () {
question = $(this);
if (question.attr('data-correct-answer') == question.find('.selected').attr("value")) {
score++;
}
});
$('.correct_answers').html(score);
}

It looks like you're using jQuery, even though the question isn't tagged as such. If that's the case, you can use a code snippet written by Chris Coyier of CSS-Tricks called shuffle children.
Here's an example of the code in action.
$.fn.shuffleChildren = function() {
$.each(this.get(), function(index, el) {
var $el = $(el);
var $find = $el.children();
$find.sort(function() {
return 0.5 - Math.random();
});
$el.empty();
$find.appendTo($el);
});
};
$("ul.randomized").shuffleChildren();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Static List:</h4>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
</ul>
<h4>Randomized List:</h4>
<ul class="randomized">
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
<li>Fourth element</li>
</ul>
In order to apply it to your own code, all you'd need to do is modify the CSS selector at the bottom of the jQuery snippet. In your case, ul.options might be a good choice.
Here are a couple of examples using your markup:
jsFiddle
Self-Contained HTML Doc

Group list-items into sub-lists based on a data attribute

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.