We Keep Coding

How to know the logic of multilevel menu event bubbling

I'm trying to understand the logic happening in my basic multilevel menu click event. I understood what happening on clicking on "About" menu in the navigation. And it works as per my expecation of code. But when i click on "Profile" menu (Submenu of "About" menu), JS makes it's sublevel menu "display:none". I tried to think in the aspect of even bubbling. But eventhough the bubbling happens here, it should not be working like this. Actually for me, its really complicated to understand how JS works here. It would be a Great Help if anyone can explain with a simple and understandable way. Thank You Very Much in Advance!!!
let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
if (item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});
let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if (cs === "none") {
ul.style.cssText = "display:block";
}
else {
ul.style.cssText = "display:none";
}
});
});
.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
.main-navigation ul li {padding:.35rem;background:#f9f9f9;}
.main-navigation ul li ul {padding-left:1rem;display:none;}
.main-navigation ul li a {display:block;text-decoration:none;}
<div class="main-navigation">
<ul>
<li>Home</li>
<li>About +
<ul>
<li>Profile +
<ul>
<li>History</li>
<li>Management</li>
</ul>
</li>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Services +
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

Solution
If you add a console.log inside your click handler you will notice that the event for the nested item is called twice.
You probably knew that it could happen and you used preventDefault.
However, preventDefault is for the browser's default effects (for example, it prevents your page to refresh as you put an href attribute) but in your case the double behaviour is from your own custom listener.
This means, you need to add stopPropagation that prevents further propagation of the current event in the capturing and bubbling phases.
Working Demo
let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item) => {
if (item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});
let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item) => {
item.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if (cs === "none") {
ul.style.cssText = "display:block";
} else {
ul.style.cssText = "display:none";
}
});
});
.main-navigation ul {
list-style: none;
margin: 0;
padding: 0;
font-family: arial;
}
.main-navigation ul li {
padding: .35rem;
background: #f9f9f9;
}
.main-navigation ul li ul {
padding-left: 1rem;
display: none;
}
.main-navigation ul li a {
display: block;
text-decoration: none;
}
<div class="main-navigation">
<ul>
<li>Home</li>
<li>About +
<ul>
<li>Profile +
<ul>
<li>History</li>
<li>Management</li>
</ul>
</li>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Services +
<ul>
<li>Web Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>

How can I get all indexes including a data attribute after sorting sortable elements?

I've currently implemented a jQuery sortable. I'm looking now for a way to get all indexes and additional data of all 2 connected list elenents within one array after each drag'n'drop. The array should looks like this:
let arrayOfObjects = [
{
index: 0, //Should be the index of an element
identifier: 0, //Should be the data-id of each element
parent_id: 0 //Should be the data-parent-id of the dropped ul
}
]
jQuery( document ).ready( function ( $ ) {
$( "#first, #second" ).sortable( {
connectWith: ".sortable",
stop: function ( event, ui ) {
//Maybe here?
}
} );
} );
.wrapper {
display: flex;
}
ul {
padding: 0;
flex: 1;
}
ul:first-child {
margin-right: 20px;
}
li {
padding: 10px;
border: 1px solid #000000;
margin-bottom: 6px;
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui#1.12.1/ui/widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable#1.0.0/jquery-ui.min.js"></script>
<div class="wrapper">
<ul id="first" class="sortable" data-parent-id="1">
<li data-id="1" class="element">1</li>
<li data-id="2" class="element">2</li>
<li data-id="3" class="element">3</li>
<li data-id="4" class="element">4</li>
<li data-id="5" class="element">5</li>
<li data-id="6" class="element">6</li>
</ul>
<ul id="second" class="sortable" data-parent-id="2">
<li data-id="7" class="element">1</li>
<li data-id="8" class="element">2</li>
<li data-id="9" class="element">3</li>
<li data-id="10" class="element">4</li>
<li data-id="11" class="element">5</li>
<li data-id="12" class="element">6</li>
</ul>
</div>
How can I do this? When I log my array, I'm expecting all elements as objects in my array with all needed parameters. I've tried a lot, used ui.item.index() but wasn't successful.

I'm not sure what you mean by index: 0, //Should be the index of an element In the example below, index will be set to the element's position in the parent ul.
jQuery(document).ready(function($) {
function getArr() {
return $("li").map(function() {
return {
index: $(this).index(),
identifier: $(this).data("id"),
parent_id: $(this).parent().data("parent-id")
}
}).get();
}
let arrayOfObjects = getArr();
console.log(arrayOfObjects);
$("#first, #second").sortable({
connectWith: ".sortable",
stop: function(event, ui) {
arrayOfObjects = getArr();
console.log(arrayOfObjects);
}
});
});
.wrapper {
display: flex;
}
ul {
padding: 0;
flex: 1;
}
ul:first-child {
margin-right: 20px;
}
li {
padding: 10px;
border: 1px solid #000000;
margin-bottom: 6px;
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui#1.12.1/ui/widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable#1.0.0/jquery-ui.min.js"></script>
<div class="wrapper">
<ul id="first" class="sortable" data-parent-id="1">
<li data-id="1" class="element">1</li>
<li data-id="2" class="element">2</li>
<li data-id="3" class="element">3</li>
<li data-id="4" class="element">4</li>
<li data-id="5" class="element">5</li>
<li data-id="6" class="element">6</li>
</ul>
<ul id="second" class="sortable" data-parent-id="2">
<li data-id="7" class="element">1</li>
<li data-id="8" class="element">2</li>
<li data-id="9" class="element">3</li>
<li data-id="10" class="element">4</li>
<li data-id="11" class="element">5</li>
<li data-id="12" class="element">6</li>
</ul>
</div>

This will get you the object you're looking for:
const list = document.querySelectorAll("[data-id]");
const listItems = Array.from(list).map((item, i) => ({
index: item.dataset.id,
identifier: i,
parent_id: item.parentNode.dataset.parentId
}));

Add pagination to the filtering with slider, and show filtered content onload

I'm trying to change the code to following requirements.
Change the "prev" and "next" button to pagination (e.g. 1 2 3 4 and so on)
Show the "Category 1" content instead of show all contents. To display the filtered content onload as shown below. I did this but not sure is it good enough or not.
Actually I'm still not familiar with jQuery and javaScript. I have been trying to figure out the following code the past few weeks, but failed. Hoping that some of you could provide me with some advice. Thanks!
//Show filtred image onload
$(document).ready(function(){
$('div.filter a:first-child').trigger('click');
});
var visible = "";
$('div.filter').delegate('a', 'click', function (event) {
visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
pagination();
event.preventDefault();
});
var itemsNumber = 8;
var min = 0;
var max = itemsNumber;
function pagination(action) {
var totalItems = $("li" + visible).length;
if (max < totalItems) {//Stop action if max reaches more than total items
if (action == "next") {
min = min + itemsNumber;
max = max + itemsNumber;
}
}
if (min > 0) {//Stop action if min reaches less than 0
if (action == "prev") {
min = min - itemsNumber;
max = max - itemsNumber;
}
}
$("li").hide();
$("li" + visible).slice(min, max).show();
}
pagination();
//Next
$("#next").click(function() {
action = "next";
pagination(action);
})
//Previous
$("#prev").click(function() {
action = "prev";
pagination(action);
})
#item-wrapper {
width:250px;
margin:30px 0 0 30px;
}
.items li {
font-family:arial;
font-size:13px;
background-color:#ccc;
margin-bottom:1px;
padding:5px;
}
.ctrl-nav {
background-color:#999;
padding:5px;
overflow:hidden;
}
.ctrl-nav a {
font-family:arial;
font-size:13px;
padding:5px 10px;
color:#fff;
}
.ctrl-nav a#prev{
float:left;
}
.ctrl-nav a#next{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
category 1
category 2
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">item 7</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
</ul>
<div class="ctrl-nav">
PreviousNext
</div>
</div>

Here you have my approach...
CSS:
div.ctrl-nav a {
padding: 5px;
margin-right: 2px;
color: white;
background: black;
}
div.ctrl-nav a.selected {
background: red;
}
JQUERY:
var selCatId = null;
var pageLength = 3;
// Filters.
$('div.filter').on('click','a',function(e) {
e.preventDefault();
// Get the category id from the href attribute.
selCatId = $(this).attr('href').substring(1);
// Create pagination.
var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length / pageLength),
pages = [];
// Create and show page numbers.
for (var i=1; i<=nPages; i++)
pages.push(''+i+'');
$('div.ctrl-nav').html(pages.join(''));
// Activate page number selection.
$('div.ctrl-nav a').click(function(e) {
e.preventDefault();
var pageInit = (parseInt($(this).text())-1)*pageLength;
$('div#item-wrapper ul.items li').hide()
.filter('.'+selCatId)
.slice(pageInit,pageInit+pageLength)
.show();
// Mark the active page.
$('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected');
});
// Show first page of the selected category.
$('div.ctrl-nav a:first').trigger('click');
});
// Show 'Category 1' when page loads.
$('div.filter a:first').trigger('click');
... and a working file... https://fiddle.jshell.net/rigobauer/zpdk9e6q/
NOTE: When you select a new category, it goes to the first page of that category.
I hope it helps

Why does the margin apply only when .info is active

Why does the 50px margin between the two lists only appear when .info is active? The gap should always be there and the text should appear within the gap once number 1-8 is selected. All suggestions are welcome.
// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".click");
var letters = document.querySelectorAll(".border");
// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);
// Loop through all the number boxes
numbers.forEach(function(box, index){
// Set up the click event handlers for all the number boxes
box.addEventListener("click", function(){
// Remove borders from each of the letter boxes
letters.forEach(function(box){
box.classList.remove("showBorder");
});
// Apply the border to only the one clicked element
var info = document.getElementsByClassName('info')[0];
info.style.display = 'inline';
letters[index].classList.add("showBorder");
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:50px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:50px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.info {margin:auto; position: relative;padding-left:3em;display:none}
<ul class="list-box">
<li class="click">1</li>
<li class="click">2</li>
<li class="click">3</li>
<li class="click">4</li>
<li class="click">5</li>
<li class="click">6</li>
<li class="click">7</li>
<li class="click">8</li>
</ul>
<div class="info">Regular length for your collar size</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>

// Get references to the two sets of boxes
var numbers = document.querySelectorAll(".click");
var letters = document.querySelectorAll(".border");
// Turn each node list into proper arrays:
numbers = Array.prototype.slice.call(numbers);
letters = Array.prototype.slice.call(letters);
// Loop through all the number boxes
numbers.forEach(function(box, index){
// Set up the click event handlers for all the number boxes
box.addEventListener("click", function(){
// Remove borders from each of the letter boxes
letters.forEach(function(box){
box.classList.remove("showBorder");
});
// Apply the border to only the one clicked element
var info = document.getElementsByClassName('info')[0];
info.style.visibility = 'visible';
letters[index].classList.add("showBorder");
});
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:50px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:50px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.info {margin:auto; position: relative;padding-left:3em; visibility: hidden;}
<ul class="list-box">
<li class="click">1</li>
<li class="click">2</li>
<li class="click">3</li>
<li class="click">4</li>
<li class="click">5</li>
<li class="click">6</li>
<li class="click">7</li>
<li class="click">8</li>
</ul>
<div class="info">Regular length for your collar size</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>
Instead of display:none
Get rid of display
and include
visibility:hidden
When the click is invoked set visibility:visible to the info element.

jquery dynamic filter list

I'm trying to make a filter list on keypress. For example if I write in input "It", the elements that doesn't match this input value are hidden. I'm not sure if the idea I have with code below does the job. Any tips will be highly appreciated!
$('ul li ul li').addClass('displayNone');
var geInputValue = $('input').val();
var getInputLength = $('input').length;
function sortDynamically(){
$('input').on('keypress', function(){
for(var i=0; i < getInputLength; i++){
if(getInputValue === $('li').text){
// remove everything that doesnt match input value
$('li').siblings().addClass('displayNone');
}
else{
$('li').siblings().removeClass('displayNone');
});
}
sortDynamically();
ul, li{
list-style-type: none;
margin: 0;
padding: 0;
}
.displayNone{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<ul class="list">
<li>Item</li>
<li>Product
<ul>
<li>Bike</li>
</ul>
</li>
<li>About</li>
</ul>

This code filters based on what you type. If there is nothing in the text input then everything is shown.
$('input').on('keypress keyup', function(){
var value = $(this).val().toLowerCase();
if (value != '') {
$('.list > li').each(function () {
if ($(this).text().toLowerCase().indexOf(value) > -1) {
$(this).removeClass('displayNone');
} else {
$(this).addClass('displayNone');
}
});
} else {
$('.list > li').removeClass('displayNone');
}
});
ul, li{
list-style-type: none;
margin: 0;
padding: 0;
}
.displayNone{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<ul class="list">
<li>Item</li>
<li>Product
<ul>
<li>Bike</li>
</ul>
</li>
<li>About</li>
</ul>

jQuery provides filters and javascript implements toLowerCase() and includes() methods that you can use to improve your code
<body>
<style>
.displayNone
{
display: none;
}
</style>
<input type="text" id="input-filter"/>
<ul class="list">
<li>Item</li>
<li>Product
<ul>
<li>Bike</li>
</ul>
</li>
<li>About</li>
</ul>
<script>
var items = $('ul.list li');
$('#input-filter').on('input', function ($event)
{
items.addClass('displayNone').filter(function (item)
{
return $(this).text().toLowerCase().includes($($event.target).val().toLowerCase());
}).removeClass('displayNone');
});
</script>
</body>