Develop Reference

Make parent link unclickable in submenu toggle

I am trying to make a sub-menu toggle on mobile but it keeps on redirecting to the parent menu link and adding event.preventDefault(); making entire sub-menu links unclickable. Any idea how to make only first .has-childern a link unclickable?
Markup
<div class="menu-container">
<ul class="nav-menu">
<li class="menu item"> Home </li>
<li class="menu-item has-childern"> About
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu-item has-childern"> Services
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu item"> Contact </li>
</ul>
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.menu-container .submenu').hide();
jQuery('.menu-container .has-childern a').click(function() {
event.preventDefault();
jQuery(this).parent().children('.submenu').toggle();
});
});
JsFiddle https://jsfiddle.net/p5fLsvcq/

You code affect all nested children instead just direct child
use '>' for select just a direct first level child in selector:
jQuery('.menu-container .has-childern > a').click(/*...*/)

How can I get the index of a list item element not "display:none;"

I want to find the index of a list item element that has no attribute style="display:none;".
Here is my basic list:
<ol>
<li style="display:none;">LI 1</li>
<li>LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
Thank you for your answers :)

While you could search for an element without a style attribute
const li = document.querySelector('ol li:not([style])');
console.log(li.textContent);
<ol>
<li style="display:none;">LI 1</li>
<li>LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>
If you're going to select elements based on the style display, I'd highly recommend using a class instead:
const li = document.querySelector('ol li:not(.hide)');
console.log(li.textContent);
.hide {
display: none;
}
<ol>
<li class="hide">LI 1</li>
<li>LI 2</li>
<li class="hide">LI 3</li>
<li class="hide">LI 4</li>
<li class="hide">LI 5</li>
</ol>

I think you can do like this.
const li = document.querySelector('li:not([style="display:none;"])');
console.log(li.textContent);
<ol>
<li style="display:none;">LI 1</li>
<li style="display:block;">LI 2</li>
<li style="display:none;">LI 3</li>
<li style="display:none;">LI 4</li>
<li style="display:none;">LI 5</li>
</ol>

List order rearrangement using jquery

Can anyone please help me on this problem.
I have a list order like:
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I want this like :
<ul>
<li class="parent">Parent item 1</li>
<div>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
</div>
<li class="parent">Parent item 2</li>
<div>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
</div>
<li class="parent">Parent item 3</li>
<div>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</div>
</ul>
is this possible to make it using jQuery?
Thanks in Advance.

If you are able to accept a semantically correct nested list, you could achieve that by using jQuery to loop through each .parent element and select each item after it until it hits the next .parent item using nextUntil(). Then, you create a new <ul> and append those children to it and then append the new <ul> to the parent <li>.
// Select all of the .parents and loop through them.
$('.parent').each(function() {
// Select all the following siblings starting from this .parent element until you reach the next .parent element.
var $children = $(this).nextUntil('.parent');
// Take the results and append them to a new ul element and then append that ul element to the current .parent li element.
$children.appendTo($('<ul>').appendTo($(this)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>

javascript. swap array elements on click

I git this list of items and an array to hold 4 of them. When clicking on an item i want it to get pushed to the array, but the array should never be more or less than 4 in its length. So when clicking on one of the LI's i want to push that item to the array. and when the array is full (when the lenght is 4) i instead want the first element in the array to be swapped out to whatever next item that gets clicked is.
My markup looks similar to this:
<ul>
<li>val 1</li>
<li>val 2</li>
<li>val 3</li>
<li>val 4</li>
<li>val 5</li>
<li>val 6</li>
<li>val 7</li>
<li>val 8</li>
<li>val 9</li>
</ul>

var ar=[];
function clickFunc(e){
if(ar.length<4){
ar.push(e.innerHTML);
}
else{
ar.unshift(e.innerHTML);
ar.pop();
}
console.log(ar)
}
<ul>
<li onclick="clickFunc(this)">val 1</li>
<li onclick="clickFunc(this)">val 2</li>
<li onclick="clickFunc(this)">val 3</li>
<li onclick="clickFunc(this)">val 4</li>
<li onclick="clickFunc(this)">val 5</li>
<li onclick="clickFunc(this)">val 6</li>
<li onclick="clickFunc(this)">val 7</li>
<li onclick="clickFunc(this)">val 8</li>
<li onclick="clickFunc(this)">val 9</li>
</ul>
u can unshift(),then pop() array.

Wrap first level of "li" tags into one div using Jquery

Consider we have a multi-level html list that looks like this:
<ul class="catalog">
<li>
<ul>
<li>
<ul>
<li>subcat subcat 1</li>
<li>subcat subcat 2</li>
<li>subcat subcat 3</li>
</ul>
</li>
<li>subcat 2</li>
<li>subcat 3</li>
</ul>
</li>
<li>
<ul>
<li>subcat 4</li>
<li>subcat 5</li>
<li>subcat 6</li>
</ul>
</li>
</ul>
I need to wrap into one div only <li> tags (hamed "header 1", "header 2"... and all its children) which belong to first level of the list.
The result should be:
<ul class="catalog">
<div class="myWrapper">
<!-- Added by JQuery -->
<li>
<ul>
<li>
<ul>
<li>subcat subcat 1</li>
<li>subcat subcat 2</li>
<li>subcat subcat 3</li>
</ul>
</li>
<li>subcat 2</li>
<li>subcat 3</li>
</ul>
</li>
<li>
<ul>
<li>subcat 4</li>
<li>subcat 5</li>
<li>subcat 6</li>
</ul>
</li>
</div>
<!-- Added by JQuery -->
</ul>
I tried wrap() function but it did not work as expected
Any ideas how to do this job?

$('.catalog > li').wrapAll('<div class="wrapper"></div>');
But you're both starting and ending with seriously invalid HTML, so you should probably fix that then ask this question again.

First, let's start with valid HTML, like this:
<ul class="catalog">
<li>header 1
<ul>
<li>subcat 1
<ul>
<li>subcat subcat 1</li>
<li>subcat subcat 2</li>
<li>subcat subcat 3</li>
</ul>
</li>
<li>subcat 2</li>
<li>subcat 3</li>
</ul>
</li>
<li>header 2
<ul>
<li>subcat 4</li>
<li>subcat 5</li>
<li>subcat 6</li>
</ul>
</li>
</ul>​
Then you cap wrap them using .wrapAll(), like this:
$(".catalog > li").wrapAll("<li><div class='something'><ul></ul></div></li>");​
This results in valid HTML, like this:
<ul class="catalog">
<li>
<div class="something">
<ul>
<li>header 1
<ul>
<li>subcat 1
<ul>
<li>subcat subcat 1</li>
<li>subcat subcat 2</li>
<li>subcat subcat 3</li>
</ul>
</li>
<li>subcat 2</li>
<li>subcat 3</li>
</ul>
</li><li>header 2
<ul>
<li>subcat 4</li>
<li>subcat 5</li>
<li>subcat 6</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
You can test it out here, though you can probably get the effect you want with styling on the original <ul>, display: block for example.