How remove class step by step [duplicate] - javascript

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>

Related

expand dropdown menu with uikit

This code is written for navbar using Uikit Css Framework.In navbar there is one dropdown list. when i clicked dropdown list it only show the content of middle section.but i want to show that dropdown list content with full container.
What would be the best possible method to show the dropdown list with full container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-card uk-card-default " style="z-index: 980;" uk-sticky="bottom: #offset">
<div class="uk-container uk-container-expand uk-box-shadow-medium" id="nav-wrapper">
<nav class="uk-navbar-container" uk-navbar id="navbar">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle uk-hidden#l" href="#" uk-toggle="target: #offcanvas-nav">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left"></span>
</a>
<ul id="menu1" class="uk-navbar-nav">
<a class="uk-navbar-item uk-logo" href="#"><img src="{{asset('img/logo.png')}}" alt=""></a>
<li class="uk-active">link</li>
<!-- This is the dropdown -->
<li class=""><a class="menu-full-width" href="#">dropdown</a>
<div class=" uk-dropdown uk-dropdown-navbar uk-dropdown-width-4" data-uk-dropdown="{justify:'#menu2'}">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
<li class="uk-parent">Showcase Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Showcase Masonry
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Mosaic
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- end dropdown -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</nav>
</div>
</div>

The important part here is the uk-drop="boundary: #navbar;".
You can find the example with justified dropdown in the docs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.20/css/uikit.min.css" rel="stylesheet" />
<nav class="uk-navbar-container" uk-navbar id="navbar">
<div class="uk-navbar-left">
<ul id="menu1" class="uk-navbar-nav">
<li class="uk-active">link</li>
<!-- This is the dropdown -->
<li class="">
<a class="menu-full-width" href="#">dropdown</a>
<div class="uk-dropdown uk-dropdown-navbar" uk-drop="boundary: #navbar; boundary-align: true; pos: bottom-justify;">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar uk-container uk-container-expand">
<li class="uk-parent">Showcase Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Showcase Masonry
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Grid
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
<div class="uk-width-1-4">
<ul class="uk-nav uk-nav-navbar">
<li class="uk-parent">Portfolio Mosaic
<ul class="uk-nav-sub">
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
<li>Column 6</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<!-- end dropdown -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</nav>

How can I move the links on one inline?

I have tried this CSS, but when you click on the fist link the other two will move at the bottom, same for the other links.
I have tried to change the initial code and put the links in one class, but I don't know that much JavaScript, so probably my modifications are very wrong.
How can I move the links on one line ? So that when you click on one link the toggled list appears without affecting the link position, so all the links will still be on one line.
HTML
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Javascript
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
CSS
.dropdown{
display:inline-block;
}
Initial code
http://jsfiddle.net/6t6BP/4/
Modified by me code
https://jsfiddle.net/Lavi2/yyfhrss0/

One solution would be to make the dropdown-container to not push elements down. You can do that, in your case, with position:absolute and position it relative to the link that triggers it.
P.S. that is not just javascript, it's jQuery.
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
position:relative
}
.dropdown-container {
position:absolute;
left:0;
top:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

Full code example
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
vertical-align:top;
}
.dropdown-container ul{
list-style:none;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>

Find ul with a specific li item in a collection of ul and than add class to it

I have a collection of unordered lists. I would like to iterate through this list and than find an specific li item and than add a class to the ul containing that li.
I hope I was clear enough for you guys. Let me show you my code for better understanding.
This is a fiddle I created to help you understand my problem.
https://jsfiddle.net/wdwn9swu/
This is what I tried to target the ul I need but it didn't work.
if ($('ul.sub-tab').find('ul.sub-tab > li.super-active')) {
$('ul.sub-tab').find('li.super-active').addClass('super-active');
}
I would like that on of the lists that corresponds with the id, to always be open.
Any idea guys ?? Thanks!!

I think the easiest and simplest way is:
$("li.super-active").parent().addClass("super-active");
According the fact you are using valid html <li> element parent must be <ul> element in that case (can also be <ol>).
$('.main-tab>li a').click(function() {
$(this).siblings('.sub-tab').slideToggle(200);
$(this).parent().siblings('li').children('.sub-tab').slideUp(200);
});
$('.main-tab li').each(function() {
id = '10';
$links = $(".main-tab li[data-id =" + id + "]");
$links.addClass("super-active");
//console.log("1234");
});
$("li.super-active").parent().addClass("super-active");
console.log($(".super-active"));
.main-tab ul {
padding-left: 10px;
}
.sub-tab {
display: none;
}
.super-active img {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab">
<li data-id="7">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

Use jQuery's :has selector:
Selects elements which contain at least one element that matches the
specified selector.
Find ul.sub-tab that has a list item with .super-active class, and add the class .super-active to the ul as well:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
Example:
$('ul.sub-tab:has(li.super-active)').addClass('super-active');
.sub-tab.super-active {
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<ul class="main-tab">
<li data-id="5">
Main 1
<ul class="sub-tab"> <!-- this will be removed -->
<li data-id="7" class="super-active">
Main 1 Sub 1
<ul class="sub-tab">
<li data-id="10">Sub 2</li>
<li data-id="11">Sub 2</li>
</ul>
</li>
<li>
Main 1 Sub 2
<ul class="sub-tab">
<li data-id="12">Sub 2</li>
<li data-id="13">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="8">
Main 2
<ul class="sub-tab">
<li data-id="9">
Main 2 Sub 1
<ul class="sub-tab">
<li data-id="14">Sub 2</li>
<li data-id="15">Sub 2</li>
</ul>
</li>
</ul>
</li>
<li data-id="3">
Main 3
<ul class="sub-tab">
<li data-id="25">
Main 3 Sub 1
<ul class="sub-tab">
<li data-id="17">Sub 2</li>
<li data-id="18">Sub 2</li>
</ul>
</li>
</ul>
</li>
</ul>

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>

Zebra striping groups of li elements

I have the following HTML and I'd like to zebra stripe the contents in groups of 3:
<ul id="item-order">
<li class="thumbnail">Item 1</li>
<li class="thumbnail">Item 2</li>
<li class="thumbnail">Item 3</li>
<li class="thumbnail">Item 4</li>
<li class="thumbnail">Item 5</li>
<li class="thumbnail">Item 6</li>
<li class="thumbnail">Item 7</li>
<li class="thumbnail">Item 8</li>
<li class="thumbnail">Item 9</li>
</ul>
So I'd like to generate the following using jQuery:
<ul id="item-order">
<li class="thumbnail stripe">Item 1</li>
<li class="thumbnail stripe">Item 2</li>
<li class="thumbnail stripe">Item 3</li>
<li class="thumbnail">Item 4</li>
<li class="thumbnail">Item 5</li>
<li class="thumbnail">Item 6</li>
<li class="thumbnail stripe">Item 7</li>
<li class="thumbnail stripe">Item 8</li>
<li class="thumbnail stripe">Item 9</li>
</ul>
How can I go about this? I have something like this in mind, but I'm not sure what to put in the if statement.
$('#item-order li:visible').each(function (i) {
if (...) $(this).addClass('stripe');
});

If you want to add it to the first 3 in sets of 6, you can use the modulus 6 operator. If you want to start with stripes use the following:
$('#item-order li:visible').each(function (i) {
if (i%6 <= 2) {
$(this).addClass('stripe');
}
});

jquery has :odd and :even selectors, so you can just do:
$( '#item-order li:odd' ).addClass( 'odd' );
$( '#item-order li:even' ).addClass( 'even' );
EDIT, completely missed the point, this should be about what you want:
$('#item-order li:visible').each(function (i) {
if( i % 6 <= 2 ) $(this).addClass('stripe');
});

Categories

Resources