Develop Reference

How remove class step by step [duplicate]

This question already has answers here:
How to select first N elements with jquery?
(7 answers)
Closed 1 year ago.
I have list items:
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item hidden"> 4</li>
<li class="item hidden"> 5</li>
<li class="item hidden"> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
<div id="btn">click btn</div>
$(function () {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item').removeClass('hidden');
});
});
This jQuery code remove all class "hidden", but how to remove a class first from the first three, then the next three and etc... ?
It should look like this:
click btn
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item "> 4</li>
<li class="item "> 5</li>
<li class="item "> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
and click btn
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item "> 4</li>
<li class="item "> 5</li>
<li class="item "> 6</li>
<li class="item "> 7</li>
<li class="item "> 8</li>
<li class="item "> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
and etc...
https://jsfiddle.net/ep8dk9o5/

Each time the button is clicked, just slice up the items which has hidden class as done below:
$(function() {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item.hidden').slice(0, 3).removeClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item hidden"> 4</li>
<li class="item hidden"> 5</li>
<li class="item hidden"> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
<div id="btn">click btn</div>

Display links in side menu when main nav links are hovered

I want to show links in the side menu, depending on what link is hovered in the top nav, and display them until another link is hovered. Here's what I have:
HTML:
<ul class="nav navbar-nav">
<li class="nav"><a class="toggle" href="#">LINK 1</a></li>
<li class="nav"><a class="toggle" href="#">LINK 2</a></li>
<li class="nav"><a class="toggle" href="#">LINK 3</a></li>
<li class="nav"><a class="toggle" href="#">LINK 4</a></li>
<li class="nav"><a class="toggle" href="#">LINK 5</a></li>
<li class="nav"><a class="toggle" href="#">LINK 6</a></li>
</ul>
<div class="sideMenu">
<div id="sideMenuLinks">
<ul id="menuContent" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
<li>SM LINK 3</li>
<li>SM LINK 4</li>
<li>SM LINK 5</li>
<li>SM LINK 6</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function() {
$('.toggle').hover(function () {
$('#sideMenuLinks').show('slow');
});
});
This works to just display on hover but obviously only for sideMenuLinks, I have more links in different ID's, so if I hovered on "LINK 2" those links would be replaced and so on. Make sense?
Thanks!

I would add a data-* attribute to the main navigation links like so:
<ul class="nav navbar-nav">
<li class="nav"><a class="toggle" data-menu="first" href="#">LINK 1</a></li>
<li class="nav"><a class="toggle" data-menu="second" href="#">LINK 2</a></li>
<li class="nav"><a class="toggle" data-menu="third" href="#">LINK 3</a></li>
</ul>
<div class="sideMenu">
<div id="sideMenuLinks">
<ul id="first" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
</ul>
<ul id="second" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
</ul>
<ul id="third" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
</ul>
</div>
</div>
Then you could get the data-menu value when hovering:
$(".toggle").hover(function() {
$(".menuContent").each(function() {
$(this).hide();
});
var menu = $(this).attr("data-menu");
$('#' + menu).show('slow');
});
Haven't tested this, but this could eventualy make the menus a little bit more dynamic.

If i comprehend correctly, you have several ID's, that you only want te have shown, when a corresponding link is hovered somewhere else on the page.
So, what you could make is a bit more of what you got going. Imagine you got this HTML:
<ul class="nav navbar-nav">
<li class="nav"><a class="toggle1" href="#">LINK 1</a></li>
<li class="nav"><a class="toggle2" href="#">LINK 2</a></li>
<li class="nav"><a class="toggle3" href="#">LINK 3</a></li>
</ul>
<div class="sideMenu">
<div id="sideMenuLinks1">
<ul id="menuContent" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
<li>SM LINK 3</li>
<li>SM LINK 4</li>
<li>SM LINK 5</li>
<li>SM LINK 6</li>
</ul>
</div>
<div id="sideMenuLinks2">
<ul id="menuContent" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
<li>SM LINK 3</li>
<li>SM LINK 4</li>
<li>SM LINK 5</li>
<li>SM LINK 6</li>
</ul>
</div>
<div id="sideMenuLinks3">
<ul id="menuContent" class="menuContent collapse out">
<li>SM LINK 1</li>
<li>SM LINK 2</li>
<li>SM LINK 3</li>
<li>SM LINK 4</li>
<li>SM LINK 5</li>
<li>SM LINK 6</li>
</ul>
</div>
</div>
Now you can use a simple for loop and the jQuery you already got, to get it going.
jQuery:
$(document).ready(function() {
for(i=0,i<3,i++){
classname = '.toggle'+i;
id = '#sideMenuLinks'+i;
$(classname).hover(function () {
$(id).show('slow');
});
}
});
I have not tested this, but its a simple, comprehensive solution. Hope this helped you!
.

Hide and show list items of divs after nth item of direct child only

Say I have an unordered list, like so:
Demo
HTML Code :
<ul>
<li>One
<ul>
<li>on 1.1</li>
<li>on 1.2</li>
<li>on 1.3</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>One 1</li>
<li>Two 2</li>
<li>Three 3</li>
<li>Four 4</li>
<li>Five 5</li>
<li>One 11</li>
<li>Two 22</li>
<li>Three 33</li>
<li>Four 44</li>
<li>Five 55</li>
</ul>
<span class="show_more">see more</span>
Script File :
$('.nav_accordian').each(function(){
var max = 4
if ($(this).find('li').length > max) {
$(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
$('.sub_accordian').click( function(){
$(this).siblings(':gt('+max+')').toggle();
if ( $('.show_more').length ) {
$(this).html('<span class="showMore">show More</span>');
}
else {
$(this).html('<span class="showMore">less More</span>');
};
});
};
});
i did for when i click on 'show more' it should be visible next five results of list items . Once every results loaded 'show more' text would be changed on 'less more'.
and when i clicked upon the 'less more' button first results result items should be visible other items would be hide.
The issue is the script is consider child list of li also

Giving a class to the list element you want to count on should resolve your problem :
<ul>
<li class="list__element">One
<ul>
<li>on 1.1</li>
<li>on 1.2</li>
<li>on 1.3</li>
</ul>
</li>
<li class="list__element">Two</li>
<li class="list__element">Three</li>
<li class="list__element">Four</li>
<li class="list__element">Five</li>
<li class="list__element">One 1</li>
<li class="list__element">Two 2</li>
<li class="list__element">Three 3</li>
<li class="list__element">Four 4</li>
<li class="list__element">Five 5</li>
<li class="list__element">One 11</li>
<li class="list__element">Two 22</li>
<li class="list__element">Three 33</li>
<li class="list__element">Four 44</li>
<li class="list__element">Five 55</li>
</ul>
<span class="show_more">see more</span>
And in your JS you would count then ".list__element", like so :
if ($(this).find('.list__element').length > max) {
...
}

Mega Menu built from scratch - Jquery reSizing

I am building a mega menu and would like for it to be at lightweight as possible.
HTML:
<div id="menu-wrapper">
<ul class="nav">
<li>Category A
<div class="block">
<h3>Category A</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li>Category B
<div class="block">
<h3>Category B</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
<li>Category C
<div class="block">
<h3>Category C</h3>
<div class="nav-column">
<ul>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
</ul>
</div>
</li>
<li>Sub-Category
<div class="sub-column">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="home">
<h3>Featured Products</h3>
<div class="featured">
<p>Lorum Ipsum...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
Of course there are many more nested onordered lists, but that is your basic heirarchy.
What I'm trying to do is create a jQuery function that will perform a height check:
When you HOVER on a .nav > li > a, the jQuery checks the heights of ALL .sub-columns AND .home that fall under it, and ONLY THOSE, when you roll off, the height check resets, so you can check the next .nav > li > a.
I was recently pointed to THIS possible solution, but it was checking ALL of the .sub-columns and not just the .sub-columns that fall under the .nav > li > a I was hovering over.
I feel that I'm 90% of the way there, but I'm just not pointing or reference the correct parent-child-sibling elements to make it work properly.
Thanks in advance.

If i understood right you want something like the following.
$(".nav > li > a").hover(function(){
var subColumns = $(this).next().find(".sub-column");
});
The next() function gets the div block(nav-column) which contains all the sub-columns for that link. Then i did a find() since it's several elements nested under that.
Here's a fiddle that alerts out the number of sub-columns it finds.

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.