I am trying to use the .append function in jquery.
I have a div with li elements in it. They have different classes, lets say odds and evens.
I would like the li's with the class "odd" moved into another div with li's in it.
How can I do this?
Here is my setup:
Edit. This was in valid markup, I just didn't put all in. Fixed now for others.
<div id="col1">
<ul>
<li class="odd"></li>
<li class="even"></li>
<li class="odd"></li>
<li class="even"></li></ul>
</div>
<div id="col2">
<ul>
<li></li>
</ul>
</div>
So then the output is:
<div id="col1">
<li class="even"></li>
<li class="even"></li>
<li class="even"></li>
<li class="even"></li>
</div>
<div id="col2">
<li class="odd"></li>
<li class="odd"></li>
<li class="odd"></li>
<li class="odd"></li>
</div>
If you already have <div> elements which you are moving elements into you can try this:
$("#col1 li").each(function(){
var $li = $(this);
if ($li.hasClass("odd")) $("#odd").append($li);
if ($li.hasClass("even")) $("#even").append($li);
});
working example:
http://jsfiddle.net/hunter/jq8bW/
Your <li> must be contained inside a list <ol> or <ul>.
First, append <div id="col2">, but that div must also contain a <ul> or <ol> to be valid. Then append the odd <li> to the new list.
// Create <div id='col2'><ul id='col2-list'></ul></div>
$("#col1").after("<div id='col2'><ul id='col2-list'></ul></div>");
// Place the list elements inside it.
$("li.odd").appendTo($("#col2-list"));
Let's say you have valid html structure like this one:
<ul id="col1">
<li class="even"></li>
<li class="odd"></li>
<li class="odd"></li>
<li class="even"></li>
</ul>
<ul id="col2">
</ul>
Here the jQuery code:
$('#col1 > .odd').each(function() {
$(this).detach().appendTo('#col2');
});
Edit: the use of .detach() is not mandatory.
Related
I have this super easy JS that does one thing; namely toggles an open class on a specific element in the page. Problem is that I have 4 repetitions of both the .clickSlide element and the .sub_menu element and when I click one of the elements to trigger the code all elements gets the open class. Only the element of concern, out of the 4, should get the open class.
My best guess is I am missing some sort of this in the JS. But I am open to solutions on this one!
jQuery(document).ready(function($) {
$(".clickSlide").click(function() {
$(".sub_menu").toggleClass("open");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ht_course_one">
<ul class="select-menu dropdown">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_two">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_three">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="ht_course_four">
<ul class="select-menu">
<li class="clickSlide">
<ul class="sub_menu">
<li></li>
</ul>
</li>
</ul>
</div>
So the solution (based on Anass Kartit answer) was this:
jQuery(document).ready(function($) {
$(".clickSlide").click(function(){
$(this).children(".sub_menu").toggleClass("open");
});
});
I need to scroll horizontally inside a lengthy list. It was possible when the list is statically implement as below.
<div style="margin-top:100px;white-space: nowrap;">
<ul >
<li style="display:inline">wfwe1</li>
<li style="display:inline">wfwe2</li>
<li style="display:inline">wfwe3</li>
<li style="display:inline">wfwe4</li>
<li style="display:inline">wfwe5</li>
<li style="display:inline">wfwe6</li>
<li style="display:inline">wfwe7</li>
<li style="display:inline">wfwe1</li>
<li style="display:inline">wfwe2</li>
<li style="display:inline">wfwe3</li>
<li style="display:inline">wfwe4</li>
<li style="display:inline">wfwe5</li>
<li style="display:inline">wfwe6</li>
<li style="display:inline">wfwe7</li>
</ul>
</div>
But if we fetch the list via a loop it will not display inline even. So horizontal scrolling is not possible. My attempt is as below.
<div
style="margin-top:100px;white-space: nowrap;">
<ul
v-for="(infoChildBtn, index) in infoSubContracts"
:key="index"
#click="infoTopBtnFun1(index, infoChildBtn)">
<li style="display:inline">
{{ infoChildBtn }}
</li>
</ul>
</div>
Where I was get wrong and how to resolve this?
The difference between your static example and your Vue example is, you are using v-for on the ul element. Therefore you will end up having something like this :
<ul>
<li style="display:inline">wfwe1</li>
</ul>
<ul>
<li style="display:inline">wfwe2</li>
</ul>
<ul>
<li style="display:inline">wfwe3</li>
</ul>
<ul>
<li style="display:inline">wfwe4</li>
</ul>
Try changing your vue template to
<div style="margin-top:100px;white-space: nowrap;">
<ul>
<li
style="display:inline"
v-for="(infoChildBtn, index) in infoSubContracts"
:key="index"
#click="infoTopBtnFun1(index, infoChildBtn)">
{{ infoChildBtn }}
</li>
</ul>
</div>
so you actually loop the li tag, not the ul tag.
the below code is for many div tag :
<div class="posts">
<div id="ex">
<ul class="ul">
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
</ul>
</div>
<div id="ex">
<ul class="ul">
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
<li id="item">s</li>
</ul>
</div>
</div>
and the below code is jquery code:
$(".ul li#item a").each(function(){
$(".ul li#item a:gt(0)").toggle();
});
i want to when run the code just show the first of li not all them.
please help me
Apply the each function with ul .And remove the id name from the selector.Because id is a unique one .hide() all li element.Then call the first().show(). its visibile only the first element
Updated
Note*:Avoid the duplication of same id name .better use classname
instead of id for multiple selector
$(".ul").each(function() {
$(this).find('li').hide().first().show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
the below code is for many div tag :
<div class="posts">
<div class="ex">
<ul class="ul">
<li>see</li>
<li>s</li>
<li>s</li>
<li>s</li>
<li>s</li>
</ul>
</div>
<div class="ex">
<ul class="ul">
<li>see</li>
<li>s</li>
<li>s</li>
<li>s</li>
<li>s</li>
</ul>
</div>
</div>
This solution is also short and sweet.
$(document).ready(function(){
$("li").hide();
$("ul>li:first-of-type").show();
});
I have a big unordered list inside a div that I need to be split into multiple lists. The reason for this is that I need to split this stuff into 5 columns for Bootstrap so all the responsive stuff works correctly. I want to split specifically on the About Us, Technology, Patients, and Site Map list elements.
I have tried using jQuery .before to insert some HTML before the "About Us" list item, but the resulting code is messed up because it is invalid HTML. I tried to do something like this, but it didn't work:
var footerLinks = $('#footer ul li');
footerLinks.each(function() {
if ($(this).attr('class') === 'list-header') {
if ($(this).find('a').text() === "About Us") {
$(this).before('</ul></div><div class="span2"><ul>');
}
}
});
Any thoughts? Thanks for your help!
What I have Now
<div class="span2 offset1">
<ul>
<li class="list-header">Home</li>
<li>LASIK</li>
<li>CATARACT</li>
<li>PATIENTS</li>
<li>Cataract Self Evaluation</li>
<li>New Patient Information</li>
<li>Patient Education</li>
<li>3D Eye Library</li>
<li>Vitreo-Retinal Fellowships</li>
<li class="list-header">About Us</li>
<li class="list-header">Doctors</li>
<li class="list-header">Services</li>
<li>Laser Cataract</li>
<li>Cornea</li>
<li>Diabetic Eye Care</li>
<li>Dry Eyes</li>
<li>Flashers & Floaters</li>
<li>Glaucoma</li>
<li>Macular Degeneration</li>
<li>Retinal Detachments</li>
<li class="list-header">Technology</li>
<li class="list-header">News</li>
<li class="list-header">Locations</li>
<li>West Mifflin</li>
<li>Butler</li>
<li>Greensburg</li>
<li>Meadville</li>
<li>Monroeville</li>
<li>Uniontown</li>
<li>Wheeling</li>
<li class="list-header">Patients</li>
<li>Literature</li>
<li>Forms</li>
<li>Patient Education</li>
<li>My AIO</li>
<li class="list-header">Testimonials</li>
<li class="list-header">Clinical Trials</li>
<li class="list-header">Careers</li>
<li class="list-header">Contact Us</li>
<li class="list-header">Site Map</li>
<li class="list-header">Privacy Policy</li>
<li class="list-header">Fellowship</li>
</ul>
</div>
What I want
<div class="span2 offset1">
<ul>
<li class="list-header">Home</li>
<li>LASIK</li>
<li>CATARACT</li>
<li>PATIENTS</li>
<li>Cataract Self Evaluation</li>
<li>New Patient Information</li>
<li>Patient Education</li>
<li>3D Eye Library</li>
<li>Vitreo-Retinal Fellowships</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">About Us</li>
</ul>
<ul>
<li class="list-header">Doctors</li>
</ul>
<ul>
<li class="list-header">Services</li>
<li>Laser Cataract</li>
<li>Cornea</li>
<li>Diabetic Eye Care</li>
<li>Dry Eyes</li>
<li>Flashers & Floaters</li>
<li>Glaucoma</li>
<li>Macular Degeneration</li>
<li>Retinal Detachments</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">Technology</li>
</ul>
<ul>
<li class="list-header">News</li>
</ul>
<ul>
<li class="list-header">Locations</li>
<li>West Mifflin</li>
<li>Butler</li>
<li>Greensburg</li>
<li>Meadville</li>
<li>Monroeville</li>
<li>Uniontown</li>
<li>Wheeling</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">Patients</li>
<li>Literature</li>
<li>Forms</li>
<li>Patient Education</li>
<li>My AIO</li>
</ul>
<ul>
<li class="list-header">Testimonials</li>
</ul>
<ul>
<li class="list-header">Clinical Trials</li>
</ul>
<ul>
<li class="list-header">Careers</li>
</ul>
<ul>
<li class="list-header">Contact Us</li>
</ul>
</div>
<div class="span2">
<ul>
<li class="list-header">Site Map</li>
</ul>
<ul>
<li class="list-header">Privacy Policy</li>
</ul>
<ul>
<li class="list-header">Fellowship</li>
</ul>
</div>
My advice is to do the following:
First, create an array of arrays and fill it with references to the list items as you want them in the separate lists.
Generate the new elements outside of the DOM, moving the list items into them.
Last, replace the existing element in the DOM with the newly created elements.
This has three benefits:
It is most efficient to modify the DOM in a single call.
The DOM will never be in an invalid state.
The code to generate the elements should be simpler if you determine the separate lists first.
What I have are multiple links in my nav bar but am having changing the ul class.
There are just two of my buttons on this page I need to change the ul class form select to current and the current to select.
<div class="nav">
<ul class=" current">
<li>
Home
<div class="select_sub">
<ul class="sub">
<li></li>
</ul>
</div>
</li>
</ul>
<ul class=" select">
<li>
About
<div class="select_sub">
<ul class="sub">
<li>About Us</li>
<li>What are we</li>
</ul>
</div>
</li>
</ul>
</div>
$(document).ready(function() {
$('.select').click(function () {
$('.current').removeClass('current').addClass('select');
});
});
You have lot of syntax errors .There is no need of using quotes for this and you missed ; at the end
replace
$('this').removeClass('select')
with
$(this).removeClass('select');
or use
$(this).removeClass('select'.)addClass("current");
$(document).ready(function() {
$('.current').click(function(){
$(this).removeClass('select'.)addClass("current");
});
});