I have the following html with two lists, and I want to press a button and swap the ul's, li´s elements between the two
<ul class="list-group" id="lines">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
I have tried to accomplish this with the following jquery code
$("#swaplists").click(function () {
var $temp1 = $("#lines").children.clone;
var $temp2 = $("#columns").children.clone;
clearLinesAndColumns();
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
the expected result would be
<ul class="list-group" id="lines">
<li class="list-group-item> 3 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item> 1 <i class="fa fa-times" aria-hidden="true"></i></li>
<li class="list-group-item> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
But I get the error
Uncaught TypeError: Cannot read property 'appendTo' of undefined
How can I achieve this functionality with jquery and why is children.clone undefined?
Instead of cloning and appending, you can simply get the html() and insert in other:
$("#swaplists").click(function() {
var linesHtml = $("#lines").html();
var columnsHtml = $("#columns").html();
$("#lines").html(columnsHtml);
$("#columns").html(linesHtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
<li class="list-group-item"> 1 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<button id="swaplists">Swap</button>
$("#swaplists").click(function () {
var $temp1 = $("#lines").children().clone();
var $temp2 = $("#columns").children().clone();
clearLinesAndColumns();
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
You forgot to put '()' after calling 'children' and 'clone'...those are methods.
Here is the sample code:
$("#swaplists").click(function() {
var $temp1 = $("#lines li");
var $temp2 = $("#columns li");
$temp2.appendTo("#lines");
$temp1.appendTo("#columns");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group" id="lines">
<li class="list-group-item"> 1 <i class="fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 2 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<ul class="list-group" id="columns">
<li class="list-group-item"> 3 <i class=" fa fa-times " aria-hidden="true "></i></li>
<li class="list-group-item"> 4 <i class="fa fa-times" aria-hidden="true"></i></li>
</ul>
<button id="swaplists">SWAP LISTS</button>
Related
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>
I have a main menu (collapse) that uses Bootstrap 3.3.7 and Font Awesome 5.0.1
What I am looking for :
When the menu is closed, a "plus" icon is displayed.
When the menu is open, a "minus" icon is displayed.
The "plus" icon is displayed on the menu but does not change.
I think there is a problem with my JS code.
<nav role="navigation" aria-labelledby="block-navigationprincipale-menu" id="block-navigationprincipale">
<ul class="menu nav navbar-nav">
<li class="expanded dropdown open">
<i class="fas fa-plus-circle fa-lg"></i> Boutiques
<ul class="menu dropdown-menu">
<li>
<i class="fas fa-shopping-bag fa-lg"></i> Boutiques
</li>
<li>
<i class="fas fa-gift fa-lg"></i> Produits
</li>
<li>
<i class="fas fa-sign-language fa-lg"></i> Services
</li>
</ul>
</li>
<li class="expanded dropdown">
<i class="fas fa-plus-circle fa-lg"></i> Groupes
<ul class="menu dropdown-menu">
<li>
<i class="fas fa-users fa-lg"></i> Groupes
</li>
<li>
<i class="fas fa-newspaper fa-lg"></i> Annonces
</li>
<li>
<i class="fas fa-file-alt fa-lg"></i> Articles
</li>
</ul>
</li>
<li>
<i class="fas fa-id-card fa-lg"></i> Profils
</li>
</ul>
</nav>
Here is my JS code. Something is wrong with it.
(function ($) {
$(".collapse-change-icon").on('shown.bs.collapse', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
});
$(".collapse-change-icon").on('hide.bs.collapse', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
})(window.jQuery);
You have not used the right bootstrap events for dropdown. Try this one.
jQuery(document).ready(function ($) {
$(".dropdown").on('shown.bs.dropdown', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-plus-circle").addClass("fa-minus-circle");
});
$(".dropdown").on('hidden.bs.dropdown', function () {
$(this).find('[data-fa-i2svg]').removeClass("fa-minus-circle").addClass("fa-plus-circle");
});
});
REf: https://getbootstrap.com/docs/3.3/javascript/#dropdowns-events
I want to make it so when you click a 'card' element,visible on the page,the classes show and open to be added,so you can see the card symbol. Anyone has any ideea why it doesn't work,i've selected it but it seems like it won't work...
Like i am selecting,iterating throught the card array adding to each card an event listener and toggling the class,why wouldn't it work?
I have this html
let card = document.getElementsByClassName("card");
let cards = [card];
// whenever something unexpected is going on
// that operates on/with a variable of yours
// do this:
console.log(typeof cards);
for (i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function() {
this.classList.toggle("open");
this.classList.toggle("show");
});
}
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
document.getElementsByClassName("card") returns an array, so your card variable is already an array. let cards = [card]; adds your array to another array.
This is why your for loop does nothing. Try this instead:
let cards = document.getElementsByClassName("card");
for (i=0;i < cards.length;i++) {
cards[i].addEventListener("click", function(){
this.classList.toggle("open");
this.classList.toggle("show");
});
}
You're almost there. Just go
let cards = document.getElementsByClassName("card");
and remove the line saying
let cards = [card];
let cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", function() {
this.classList.toggle("open");
this.classList.toggle("show");
});
}
.deck {
list-style-type: none;
display: flex;
}
.card {
border: 1px solid #ddd;
width: 20px;
height: 30px;
}
.open::before {
content: "o"
}
.show::after {
content: "s";
}
<div class="container">
<header>
<h1>Matching Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">3</span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
If for some reason you want to cast your HTMLCollection that returns from document.getElementsByClassName("card") to a native Array, use Array.from:
let card = document.getElementsByClassName("card");
let cards = Array.from(card); // or [...card]
My jQuery Breadcrumb
Breadcrumb = $(e.target).parentsUntil(".Menu").filter("li").children("a").map(function() {
return $(this).html().trim().replace(/Master Dashboard/g,"Dashboard");
}).get().reverse().join("<li><i class=\"fa fa-arrow-right\"></i></li>");
Returns
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>
<li><i class="fa fa-arrow-right"></i></li>
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>
<li><i class="fa fa-arrow-right"></i></li>
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>
Needs To Be
<li>
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
</li>
<li><i class="fa fa-arrow-right"></i></li>
<li>
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
</li>
Question
I've tried several ways to .wrap("<li></li>") and to remove unwanted <span>...</span>'s from my breadcrumb however all have resulted in breaking my script.
How do I achieve my 'Needs To Be' by:
Remove all span.Arrow and span.Counter
Wrap each section in <li></li>
Live Demo
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
var Breadcrumb;
if ($(e.target).closest($('.Menu')).length) {
Breadcrumb = $(e.target).parentsUntil(".Menu").filter("li").children("a").map(function() {
return $(this).html().trim().replace(/Master Dashboard/g,"Dashboard");
}).get().reverse().join("<li><i class=\"fa fa-arrow-right\"></i></li>");
console.log(Breadcrumb);
};
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="SideNav">
<!-- === Navigation Menu Starts === -->
<ul class="Menu">
<!-- === Minified Nav Starts === -->
<li class="MinifySideBar" style="display: none;">
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-list-ul fa-2x"></i>
</a>
</li>
<!-- === Minified Nav Ends === -->
<!-- === Main Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-home fa-2x"></i>
<span class="Title">Master Dashboard</span>
</a>
</li>
<!-- === Main Dashboard Ends === -->
<!-- === User Account Starts === -->
<li>
<a href="javascript:;" data-title="Account">
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu First">
<!-- === User Account Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<i class="fa fa-home fa-lg"></i>
<span class="Title">Dashboard</span>
</a>
</li>
<!-- === User Account Dashboard Ends === -->
<!-- === User Messages Starts === -->
<li>
<a href="javascript:;" data-title="Account/Messages">
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<i class="fa fa-plus fa-lg"></i>
<span class="Title">Compose</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Inbox">
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Drafts">
<i class="fa fa-pencil-square-o fa-lg"></i>
<span class="Title">Drafts</span>
<span class="Counter">123</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Trash">
<i class="fa fa-trash fa-lg"></i>
<span class="Title">Trash</span>
<span class="Counter">12</span>
</a>
</li>
</ul>
</li>
<!-- === User Messages Ends === -->
</ul>
</li>
</ul>
</div>
UPDATE with document click
$(document).ready(function() {
"use strict";
$(document).on('click', function(e) {
var Breadcrumb;
if ($(e.target).closest($('.Menu')).length) {
Breadcrumb = $(e.target).parentsUntil(".Menu").find('li a').map(function() {
var el = $(this); // remove second span
$(el).find('span.Counter,span.Arrow,i').remove();
$(el).prepend("<i class=\"fa fa-arrow-right\"></i>");
var tx = $(el).html().replace(/Master Dashboard/g,"Dashboard").replace(/\t/g, "")
var out = "<li>" + tx + "</li>";
return out;
}).get().reverse();
console.log(Breadcrumb);
};
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
<!-- === Navigation Menu Starts === -->
<ul class="Menu">
<!-- === Minified Nav Starts === -->
<li class="MinifySideBar" style="display: none;">
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-list-ul fa-2x"></i>
</a>
</li>
<!-- === Minified Nav Ends === -->
<!-- === Main Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Master-Dashboard">
<i class="fa fa-home fa-2x"></i>
<span class="Title">Master Dashboard</span>
</a>
</li>
<!-- === Main Dashboard Ends === -->
<!-- === User Account Starts === -->
<li>
<a href="javascript:;" data-title="Account">
<i class="fa fa-user fa-2x"></i>
<span class="Title">Account</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu First">
<!-- === User Account Dashboard Starts === -->
<li>
<a href="javascript:;" data-title="Account/Dashboard">
<i class="fa fa-home fa-lg"></i>
<span class="Title">Dashboard</span>
</a>
</li>
<!-- === User Account Dashboard Ends === -->
<!-- === User Messages Starts === -->
<li>
<a href="javascript:;" data-title="Account/Messages">
<i class="fa fa-envelope fa-lg"></i>
<span class="Title">Messages</span>
<span class="Arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;" data-title="Account/Messages/Compose">
<i class="fa fa-plus fa-lg"></i>
<span class="Title">Compose</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Inbox">
<i class="fa fa-inbox fa-lg"></i>
<span class="Title">Inbox</span>
<span class="Counter">1,234</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Drafts">
<i class="fa fa-pencil-square-o fa-lg"></i>
<span class="Title">Drafts</span>
<span class="Counter">123</span>
</a>
</li>
<li>
<a href="javascript:;" data-title="Account/Messages/Trash">
<i class="fa fa-trash fa-lg"></i>
<span class="Title">Trash</span>
<span class="Counter">12</span>
</a>
</li>
</ul>
</li>
<!-- === User Messages Ends === -->
</ul>
</li>
</ul>
</div>
this one outputs correct html for you:
see if it's ok now, cheers k
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