Want jquery to replace same <li> and all element insie ul - javascript

I want jquery to include <li> and all other tags inside <ul class="visib-1"></ul> to <ul class="visib-2"></ul> without writing li,a href="" tags again. Is there have any solution?Is it possible to capture all elements from one UL and transfer to other UL?
From:
<ul class="visib-1">
<li>Home</li>
<li>Properties</li>
<li>Blog</li>
<li>Start Now</li>
</ul>
To:
<ul visib-1>
?
</ul>

If all you want is to move from one <ul> to another:
$('#first-ul-id li').appendTo('#second-ul-id');
If you want to copy use clone()
$('#first-ul-id li').clone().appendTo('#second-ul-id');

Here is the solution. Check the code below:
This code will also copy the event handlers attached.
var cloneOfOld = $('[data-status="old"]').clone(true);
cloneOfOld.attr('data-status','new');
var newUl = $('[data-status="new"]');
newUl.replaceWith(cloneOfOld);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-status="old"><li>Home</li>
<li>Properties</li>
<li>Blog</li>
<li>Start Now</li>
</ul>
<ul data-status="new">
</ul>

Related

How to prepend HTML `<li>` to `<ul>` using jQuery?

I need to append an <li> element to multiple <ul> using a for-loop in jQuery.
Code Snippet:
JQuery:
var lists = $('ul.menu');
for(var i=0; i<lists.length; i++){
var lnk = "<li>All</li>";
lnk = $('<div />').html(lnk).text();
lists[i].prepend(lnk);
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Graphics</li>
<li>Videos</li>
<li>Programming</li>
</ul>
<hr>
<ul class="menu">
<li>Our Story</li>
<li>About Us</li>
</ul>
As per code <li> inserts as the proper text, but is been formatted as plain text instead of an <li>.
What am I doing wrong? How to correct my mistakes?
You're calling the raw DOM prepend (which only exists on modern browsers), because lists[i] accesses the raw ul element. You're also just taking the text of what you want to prepend, rather than including any li markup. You probably want to:
Call jQuery's prepend, and
Include the li in what you're prepending
Example:
var lists = $('ul.menu');
for(var i=0; i<lists.length; i++){
var lnk = "<li>All</li>";
lists.eq(i).prepend(lnk);
}
/* No CSS */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Graphics</li>
<li>Videos</li>
<li>Programming</li>
</ul>
<hr>
<ul class="menu">
<li>Our Story</li>
<li>About Us</li>
</ul>
A slightly more jQuery-ish alternative to TJ Crowder's solution...
$('ul.menu').each(function() {
$(this).prepend("<li>All</li>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Graphics</li>
<li>Videos</li>
<li>Programming</li>
</ul>
<hr>
<ul class="menu">
<li>Our Story</li>
<li>About Us</li>
</ul>

javascript horizontal menu click to open

Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle

Remove the class of one element and assign it to another using JavaScript

I need to remove the selected class of an <a> and assign it the last <a> instead. Both are nested within individual <li> elements.
Here's an example of the code:
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
How can I achieve this using JavaScript/jQuery? Please advise.
EDIT:
Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?
EDIT #2:
Thank you so much everyone for the quick response. All your answers were spot on, wish I could mark them all as answers :)
To remove class from an element, use removeClass.
To get the last element, use :last selector or last(). To add new class to element use addClass
$('.selected').removeClass('selected');
$('.tabs li:last a').addClass('selected');
// OR
// $('.tabs li').last().children('a').addClass('selected');
.selected {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home
</li>
<li class="tab">About
</li>
<li class="tab">Profile
</li>
<li class="tab">History
</li>
<li class="tab">The Beginning of V-Cube
</li>
</ul>
Update
Let's say I don't want to target the last tab specifically. Can the href be used as a selector instead?
$('.tabs a[href="#five"]').addClass('selected');
Try this.
$(".tabs li").first().find("a").removeClass("selected");
$(".tabs li").last().find("a").addClass("selected");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
Try this:
$(document).ready(function(){
var classname = $(".tabs li:first-child a").attr("class");
console.log(classname);
$(".tabs li:last-child a").addClass(classname);
$(".tabs li:first-child a").removeClass();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home</li>
<li class="tab">About</li>
<li class="tab">Profile</li>
<li class="tab">History</li>
<li class="tab">The Beginning of V-Cube</li>
</ul>
it is quite easy also in vanilla JS:
document.querySelector('.selected').classList.remove('selected');
document.querySelector('.tabs li:last a').classList.add('selected');
If you want to use an arbitrary a and select the attribute href then you should use this selector:
a[href="HREFVALUE"]
$('.clearfix').find('.selected').removeClass('selected');
$('.clearfix').find('li:last').find('a').addClass('selected');
$("a[href$='five']").addClass('bold');
.selected {
color: red
}
.bold {
font-weight: bold
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tabs clearfix">
<li class="tab">Home
</li>
<li class="tab">About
</li>
<li class="tab">Profile
</li>
<li class="tab">History
</li>
<li class="tab">The Beginning of V-Cube
</li>
</ul>
Just use .removeClass() and .addClass()
.removeClass()
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
.addClass()
Description: Adds the specified class(es) to each element in the set of matched elements.

jQuery replacing multiple elements with a single one

I'm trying to replace two divs that has separate ul elements into a single one, so I can create a single ul with the li of both, but my current code creates separate ul, and that is not my intended purpose, could anyone enlighten me on how to make the proper selection for these:
my jQuery
$('nav div.moduletable_gfbb_navigationbar, nav div.moduletable_menu_navigationbar').replaceWith(function(){
var html = '<ul class="nav navbar-nav navbar-right">';
$(' ul',this).each(function(){
html += $(this).html();
});
html+='</ul>';
return html;
});
my HTML
<div class="moduletable_menu_navigationbar">
<ul class="menu">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
</div>
<div class="moduletable_gfbb_navigationbar">
<ul class="menu">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
</div>
And the output I get (not what I want)
<ul class="nav navbar-nav navbar-right">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
What I want is a single 'ul', I know I can recode it, but I'm trying to use the less code posible.
Your example does not include a <nav> tag which may be the primary cause of your problem, but to produce more readable code I would do it like this.
I used an array for the selectors, because it aids in readability and maintainability. It also allows you to easily insert the new list before the first menu by using only the first selector, whatever that may be.
Basically I select all of the <li> elements descending from the selectors and move those to the newlist. Then insert the new list before the first list div. Then remove the old lists.
var selectors = [
'nav div.moduletable_gfbb_navigationbar',
'nav div.moduletable_menu_navigationbar'
], selectorText = selectors.join(', ');
var newList = $('<ul class="nav navbar-nav navbar-right">');
$('li', selectorText).each(function(){ newList.append(this); });
$(selectors[0]).before(newList);
$(selectorText).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="moduletable_menu_navigationbar">
<ul class="menu">
<li id="current" class="active item8"><span>Banca Personas</span></li>
<li class="item9"><span>Banca Pyme</span></li>
<li class="item10"><span>Banca Empresas</span></li>
<li class="item602"><span>Bankard</span></li>
</ul>
</div>
<div class="moduletable_gfbb_navigationbar">
<ul class="menu">
<li class="item12"><span>Informacion Institucional</span></li>
</ul>
</div>
</nav>
$('.moduletable_menu_navigationbar .menu').append($('.moduletable_gfbb_navigationbar .menu').html());
$('.moduletable_gfbb_navigationbar').remove();
Is this what you are looking for!!

search for tag(s) in string

I'm saving markup this way:
var nav_large = nav_container.html();
The saved markup looks like this:
<ul>
<li>Toolbox</li>
<li>Starten</li>
<li>
Basis
<div class="main-navigation-cart">
<ul>
<li>CSS</li>
<li>KOMPONENTEN</li>
<li>JAVASCRIPT</li>
<li>ICONS</li>
</ul>
</div>
</li>
<li>Komponenten</li>
<li>Single Sign-On</li>
</ul>
Now I need to be able to search after ul for example. The markup from the nav_container has been removed at this stage of the script.
Hope you guys can help me out!

Categories