I have the following html:
<ul class="collection">
<li>a
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>s
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>w
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
I have an onclick listener on the UL (called taskList). console.log says the element UL (taskList) is an object. Can I iterate through the li's as follows:
for (const task in taskList) {
console.log(task);
}
No, for ... in will loop over the properties of the object. You could use for ... of to loop over the children.
const taskList = document.querySelector('ul.collection');
for (const task of taskList.children) {
console.log(task.outerHTML);
}
<ul class="collection">
<li>a
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>s
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li>w
<a class=" delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
Related
I have designed a side nav for a website. How can I add a class on click of a nav item and remove it from the previous nav item?
I have tried this solution right here: https://codepen.io/8eni/pen/MaGVrq
I have also tried a bit of jQuery.
Here is my code:
<ul class="side_menu" id="sideMenu">
<li class="list_header">
<p class="list_p">REVIEWS</p>
<ul class="sub_list">
<li class="sub_list_item" style="padding-top: 0px !important;">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-layer-group padding_right"></i> All Reviews
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-up padding_right"></i> Best Albums
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-down padding_right"></i> Worst Albums
</a>
</li>
</ul>
</li>
<li class="list_header">
<p class="list_p">GENRES</p>
<ul class="sub_list">
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Dub
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Electronica
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i> Grundge
</a>
</li>
</ul>
</li>
</ul>
I want a class to be added to the particular item clicked by a user. Once another item is clicked, the previous item gets the class removed.
Here's a pure JavaScript way to do it (no dependencies). I prevented the default link behaviors for the sake of the demo.
const listItems = document.querySelectorAll('.sub_list_item');
function setActiveClass() {
if (document.querySelector('.sub_list_item.active') != null) {
document.querySelector('.sub_list_item.active').classList.remove('active');
}
this.classList.add('active');
}
listItems.forEach(item => {
item.addEventListener('click', setActiveClass);
});
// DEMO ONLY — REMOVE
const listLinks = document.querySelectorAll('.sub_list_link');
listLinks.forEach(link => {
link.addEventListener('click', e => e.preventDefault());
});
.sub_list_item.active {
background-color: yellow;
}
<ul class="side_menu" id="sideMenu">
<li class="list_header">
<p class="list_p">REVIEWS</p>
<ul class="sub_list">
<li class="sub_list_item" style="padding-top: 0px !important;">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-layer-group padding_right"></i>
All Reviews
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-up padding_right"></i>
Best Albums
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-thumbs-down padding_right"></i>
Worst Albums
</a>
</li>
</ul>
</li>
<li class="list_header">
<p class="list_p">GENRES</p>
<ul class="sub_list">
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i>
Dub
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i>
Electronica
</a>
</li>
<li class="sub_list_item">
<a href="https://www.facebook.com" target="_blank" class="sub_list_link">
<i class="fas fa-music padding_right"></i>
Grundge
</a>
</li>
</ul>
</li>
</ul>
jsFiddle
Using jQuery:
$(document).ready(function(){
$('.sub_list_item').click(function(){
$('.sub_list_item').removeClass('yourClass');
$(this).addClass('yourClass');
});
});
Hope this works! The idea is to remove yourClass from all nav items and then add it to only the current one.
I have li list items. When I click on any one li item it should get appended or displayed to one div tag and the remaining list items at the sam time should get appended in other div tag using jQuery.
$(document).on('click', '.main-menu li', function() {
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$(this).remove()
});
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Hope I understood correctly what you expected. As mentionned before, if you want to append li to your div, you need a parent ul on top.
As suggested, here is a snippet :
$('.main-menu li').on('click', function(_click) {
var $selectedLi = $(_click.currentTarget);
$('.topnav ul').append($selectedLi.clone());
$selectedLi.remove();
$('.sidenav ul').append($('.main-menu ul').clone());
$('.main-menu ul').remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav">
<ul></ul>
</div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav">
<ul></ul>
</div>
Actually you can't append li elements to div, they can just be appended to a list element.
What you need to do is to get the text of the li elements and append it to the divs, and use $('.main-menu li').not($(this)) to get other li elements, where $(this) is the clicked li element.
This is how should be your code:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
Demo:
$(document).on('click', '.main-menu li', function() {
$('.sidenav').text($(this).text());
$('.topnav').empty();
$('.main-menu li').not($(this)).each(function(i) {
$('.topnav').append($('.main-menu li').not($(this))[i].textContent);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<nav class="main-menu">
<ul>
<li class="acc">
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
List One
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
List Two
</span>
</a>
</li>
<li class="has-list">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
List Three
</span>
</a>
</li>
</ul>
</nav>
<div class="sidenav"></div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
I'm a beginner to javascript, I've been trying to add the active class to a li using jquery i.e. When its clicked, expand li and make it active:
<script>
$(document).ready(function() {
var url = window.location['pathname'];
jQuery('li a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
</script>
This only makes the sub-menu active but not expanded. But when I manually added the active class (as shown below) to treeview and li, it expanded and became active. How to dynamically add the active class through jquery?
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MENU</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-table"></i> <span>USER</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-plus"></i> Add</li>
<li class="treeview active">
<a href="#"><i class="fa fa-circle-o"></i> Profile
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><i class="fa fa-circle-o"></i> View </li>
<li><i class="fa fa-circle-o"></i> Settings </li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
So, you need to apply active class on all .treeview using parents:
$(this).parents('.treeview').addClass('active');
Actually, changing parent() to parents() fixed it:
$(this).parents().addClass('active');
I have a problem with twitter bootstrap. I created a simple dropdown menu, but when i inspect the code in chrome inspector, i see that the class nav nav-pills are added to the <ul class="dropdown-menu pull-right"> element.
How can i delete these classes ?
<div class="btn-group">
<a class="btn btn-circle btn-default " href="javascript:;" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil-square-o"></i> Action
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="saveButton" href="javascript:;">
<i class="fa fa-save"></i> Save </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-paste"></i> Save as </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete </a>
</li>
</ul>
</div>
Here you have a jsfiddle with bootstrap using your code and nothing happends. You might wanna check your javascript code and event listeners because you might be adding these classes with javascript code by yourself.
<div class="btn-group">
<a class="btn btn-circle btn-default " href="javascript:;" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil-square-o"></i> Action
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="saveButton" href="javascript:;">
<i class="fa fa-save"></i> Save </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-paste"></i> Save as </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete </a>
</li>
</ul>
</div>
My code for a 2 level menu goes like this:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
</a>
</li>
</ul>
</li>
<ul>
Now I want to select the span with id=destruct, which is at level 1 and on click remove entire html in the li (including the second level ul tag). You must have got it that I am trying to make a "X", upon clicking which the menu item and any sub-menu item deletes.
However, I need your help in selecting the correct elements. For only Level 1 menu, the following jQuery code works:
$(".destruct").click(function(e){
$(this).parent().remove();
});
What could be the correct selector for Level 2 menu? I tried a few options like nth children and all, but cant seem to get it right.
You have this: li > a > span, so if you start in the span, you should look at the parent of the parent, of what is best, search for the closest "li" (because yo can change your html structure inside li's without tuch your jquery code). With a change in the html (add the x in all levels) you can get what #Juan suggested:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
<span class="destruct" style="float:right">X</span>
</a>
</li>
</ul>
</li>
<ul>
$(function () {
$(".destruct").click(function() {
$(this).parent().parent().remove();//first option
$(this).closest('li').remove();//best option
});
});
Working example: http://codepen.io/anon/pen/ZGaGby