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");
});
});
Related
I'm trying to expand my filtering function for li elements in ul.
My ul structure looks like this:
<ul>
<li class="root"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Currently I have filter function that filters based on query among .list elements. Now I'm trying to implement it in a way, that while filtering list (still only .list elements), there would be structure history.
For example: searching for "li2.3.2" would return:
<ul>
<li class="root"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
</ul>
EDIT: For clarification and since I failed to mention that in original post...I'm trying to filter by users input (partial matching counts).
My current method works by taking users input in text input box, taking all .list elements in ul and comparing for each element if span.text contains searching text.
you should give class every floor,and use CSS filter :parent and :nth-chiled find what you want
#pc9529, yes it is possible. but here you want o display only parent li node html. So give different class to the li which is belonging from your parent UL. Look at the given solution,
$(document).ready(function(){
$("li").click(function(e){
e.stopPropagation();
if($(this).hasClass("root1"))
{
alert($('<div>').append($(this).clone()).html());
}
else{
alert($('<div>').append($(this).closest(".root1").clone()).html());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="root1"><span class="text">Root1</span>
<ul>
<li class="list"><span class="text">li1.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root2</span>
<ul style="display: block;">
<li class="root"><span class="fa fa-chevron-down"></span><i class="fa root-checkbox fa-square-o"></i><span class="text">Root2.1</span>
<ul style="display: block;"></ul>
</li>
<li class="root"><span class="text">Root2.2</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.2.1</span></li>
</ul>
</li>
<li class="root"><span class="text">Root2.3</span>
<ul style="display: block;">
<li class="list"><span class="text">li2.3.1</span></li>
<li class="list"><span class="text">li2.3.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="root1"><span class="text">Root3</span>
<ul>
<li class="list"><span class="text">li3.1</span></li>
</ul>
</li>
<li class="root1"><span class="text">Root4</span>
<ul>
<li class="list"><span class="text">li4.1</span></li>
<li class="list"><span class="text">li4.2</span></li>
</ul>
</li>
</ul>
Please have a look at this JSFiddle
The JQuery finds your item by text, then find all parents that contain the ".root" class, and finally gets the last parent i.e. the root ul element of the hierarchy.
$('.list:contains("li2.3.2")').parents('.root').last().html()
I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>
You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle
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");
});
});
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.