<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product
<ul> // level 2
<li>x3</li>
<li>x4</li>
</ul>
</li>
<li>Meet the team
<ul> // level 2
<li>x1</li>
<li>x2</li>
</ul></li>
</ul>
</li>
</ul>
using jquery i wanted to select ul of level 2
like if i hover on 'The product' then i want to select only ul[level 2] that is next to it not all level 2 ul.
I use jQuery code to select like this
$('#nav li ul li').mouseover(function(){
$(this).children('ul').css('opacity','.5');
});
but this code effect on both level 2 ul i want to select the ul that is inside that <li> which is hover...
Try this using Child combinator selector:
$('#nav > li > ul > li').mouseover(function(){
$(this).children('ul').css('opacity','.5');
});
This means it will only select list items that are direct children of an unordered list. In other words, it only looks one level down the markup structure, no deeper.
Can do with CSS:
jsfiddle demo
#nav > li > ul > li:hover > ul {opacity:.5;}
Related
I have a accordian-style nav here. So every time an H3 is clicked, the list items drop down.
1.I want to color the H3 green if it's clicked, so users know what's currently clicked.
2.I also want to color whatever item/dog is clicked ( the < a > elements).
So the currently clicked Heading and subheading should both be highlighted.
<div id="accordian">
<ul class="sidebar-nav" id=menu>
<li class="active">
<h3>ITEMS</h3>
<ul>
<li> item1</li>
<li> item2</li>
<li> item3</li>
</ul>
</li>
<li>
<h3>dogs</h3>
<ul>
<li> dog1</li>
<li> dog2</li>
<li> dog3</li>
</ul>
</li>
</ul>
</div>
THis is what I tried so far for 1, it doesn't work. Also, not sure how to do 2.
.sidebar-nav li.active{
color:green;
}
$('ul.sidebar-nav li h3').on('click', function(){
$('ul.sidebar-nav li').removeClass('active');
$(this).addClass('active');
});
You can do something like this:
$('ul.sidebar-nav li h3').on('click', function(){
$("ul.sidebar-nav li ul li, ul.sidebar-nav li h3").removeClass("active");
$(this).addClass("active");
});
$('ul.sidebar-nav li ul li').on('click', function(){
if($(this).parents("li").find("h3").hasClass("active")){
$(this).addClass("active");
}
});
.active{
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordian">
<ul class="sidebar-nav" id=menu>
<li>
<h3>ITEMS</h3>
<ul>
<li> item1</li>
<li> item2</li>
<li> item3</li>
</ul>
</li>
<li>
<h3>dogs</h3>
<ul>
<li> dog1</li>
<li> dog2</li>
<li> dog3</li>
</ul>
</li>
</ul>
</div>
The idea is to use the clicked element to find the h3 and li that need to be highlighted. Also, in CSS, make the selector more generic so it will apply to both the h3 and li elements.
You are not targeting the H3 tag with your active class. In your code, $(this) is referring the the li. You will need to target the parent H3 of clicked li that has the listener.
EDIT
In the code example see my comments to the lines I added. I target all h3 tags and remove the active class to clear everything out, then I target just the parent h3 tag of the clicked li.
Also update your style to have a less specific class for any element with class active:
.active {
color:green;
}
$('ul.sidebar-nav li').on('click', function(){
$('ul.sidebar-nav li').removeClass('active');
// removes all active classes on h3 tags
$('#accordian').find('h3').removeClass('active');
$(this).addClass('active');
// add active to parent h3 as well
$(this).parents('h3').addClass('active');
});
// If you want them to to highlight independently you need 2 listeners
$('#accordion').find('.sidebar-nav h3').on('click', function() {
// removes all active classes on h3 tags
$('#accordian').find('h3').removeClass('active');
// add active to parent h3 as well
$(this).addClass('active');
});
$('#accordion').find('.sidebar-nav a').on('click', function() {
$('#accordion').find('.sidebar-nav a').removeClass('active');
$(this).addClass('active');
});
With Jquery, I am trying to add a clone element and remove the previously added element. Adding a clone element is working but removing the previously added element is not working (it removes all the clone elements). I am using "not()" function but it is not filtering as I want it to.
I searched through the web but could not find a solution so your help will be greatly appreciated!
--HTML--
<div id="clone-container">
<!--cloned element comes here-->
</div>
<div id="original-container">
<ul>
<li>
<span>Value1</span>
</li>
<li>
<span>Value2</span>
</li>
<li>
<span>Value3</span>
</li>
</ul>
</div>
--Jquery--
$(document).ready(function(){
$('#original-container > ul > li').click(function(event){
//for adding clone elements
var $selected_clone = $(this).children("span").clone();
$selected_clone.appendTo("#clone-container > ul > li");
// for removing previously added elements
$("#clone-container > ul > li > span").not($selected_clone).remove();
});
});
Remove the appendTo code execution and replace below
$("#clone-container > ul > li > span").not($selected_clone).remove();
with
$("#clone-container > ul > li > span").html($selected_clone.html());
Hope this will help !!
Check this out.. http://jsbin.com/uZij/1/
HTML
<div id="clone-container">
<ul>
</ul>
<!--cloned element comes here-->
</div>
<div id="original-container">
<ul>
<li>
<span>Value1</span>
</li>
<li>
<span>Value2</span>
</li>
<li>
<span>Value3</span>
</li>
</ul>
</div>
jQuery
$(document).ready(function(){
$('#original-container > ul > li').click(function(event){
//for adding clone elements
var $selected_clone = $(this).clone();
$selected_clone.appendTo("#clone-container > ul");
// for removing previously added elements
$("#clone-container > ul > li").not($selected_clone).remove();
});
});
I got the following structure: - nested UL
<ul>
<li>Category 1
<ul>
<li> Category 1.1</li>
<li> Category 1.2</li>
<li> Category 1.3</li>
</ul>
</li>
<li> Category 2
<ul>
<li>Category 2.1</li>
<li>Category 2.2</li>
<li>Category 2.3</li>
</ul>
</li>
<li>Category 3
<ul>
<li>Category 3.1</li>
<li>Category 3.2</li>
<li>Category 3.3</li>
</ul>
</li>
I've applied a rule with CSS:
ul{
list-style: none;
padding:0;
margin:0;
}
ul ul{
display:none;
}
which leaves only the MAIN category shown.
What i was trying to do is, whenever a user clicks on the Category 1/2/3, its <ul> will be visible. I've tried this code:
$(document).ready(function() {
$("ul li").click(function() {
$(this + "ul").Slidedown(800);
});
});
well, basically I was trying to select the <ul element that was inside the main <ul>.
How do I do it?
Try this.
$(document).ready(function() {
$("ul li").click(function() {
$(this).find('ul').Slidedown(800);
});
});
Given your selector, click on Category 1.1 will also call the callback, but it won't do anything since it doesn't have any ul tags. Still, it's better to add a class and bind the event only on those.
this is not a string, it's a DOM element.
Instead of $(this + "ul"), you want $('ul', this).
P.S. .Slidedown should be .slideDown.
$(this).find('ul:hidden').slideDown(800);
something like this should work
$(document).ready(function() {
$("ul > li").click(function() {
$(this).find("> ul").Slidedown(800);
});
});
Although, an even more efficient approach(thanks to Ian) would be:
$(document).ready(function() {
$("ul").children('li').click(function() {
$(this).children("ul").Slidedown(800);
});
});
using the '>' operator tells jquery to only look for direct children, if you don't use '>' the code will apply to the li elements inside the nested ul as well. also, read the other answers info about using 'this' properly.
You're concatenating the DOM element with "ul" to a string - that's not a valid selector. Instead, use .find() to apply the ul selector in the context of the current element.
$(document).ready(function() {
$("ul li").click(function() {
$(this).find('ul').Slidedown(800);
});
});
And maybe make the ul li selector a bit more specific to match only the outer list items.
I have the follow list that I need to be able to hide all accept for what is actually in focus with class active.
<Ul>
<Li>something</li>
<ul>
<li>Something</>
<li>Something</>
</ul>
<Li>something</li>
<Li>something</li>
<Li>
<Ul>
<Li class="active">something</li>
<Li>omething</li>
</Ul>
</li>
<Li>something</li>
</Ul>
I need to be able to use .hide() on all li that are not related to the bottom level one with the active class
The result would be
<Ul>
<Li>something</li>
<Li>something</li>
<Li>something</li>
<Li>
<Ul>
<Li class="active">something</li>
<Li>omething</li>
</Ul>
</li>
<Li>something</li>
</Ul>
You can traverse up the DOM yo find the first level li element and its siblings. If you have only two levels, this should work:
$('li.active').parent().closest('li').siblings().children('ul').hide();
If you have more than two levels, I suggest to give the root ul a class or ID:
$('li.active').closest('#root > li').siblings().children('ul').hide();
$( 'li:not(.active,.active ~ li,.active li,:has(.active))' ).hide();
This selects all li elements, but excludes (by using :not()):
.active — the active li element itself
.active ~ li — sibling li elements of the active li element
.active li — descendant li elements of the active li element
has(.active) — li elements that have the active li element as its descendant
jsfiddle demo
If you want to keep showing descendants of the active li element's siblings as well, add .active ~ li li to the :not() selectors:
$( 'li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))' ).hide();
jsfiddle demo
Following up on OP's first comment to this answer:
Just add an li before the initial selector:
$( 'li li:not(.active,.active ~ li,.active li,.active ~ li li,:has(.active))' ).hide();
jsfiddle demo
I am trying to select only the first children under Sally. Using JavaScript, how would I select Car, Boat, & Bike and change the font color to red?
<script type="text/javascript">
$(document).ready(function() {
var j = jQuery.noConflict();
j('#content2 ul li ul').children().css('color', '#ff0000');
});
</script>
<div id="content2">
<div>
<div>
<ul>
<li>Bob</li>
<li>Sally
<ul>
<li>Car</li>
<li>Boat</li>
<li>Bike
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</li>
</ul>
</li>
<li>Larry</li>
<li>Mo</li>
</ul>
</div>
</div>
</div>
querySelectorAll will select elements based on a CSS selector, so one way would be:
var elements = document.querySelector('#content2 > div > div > ul > li > ul > li');
Oh, you've got jQuery. Then you just need to be a little more specific, because descendants will be matched by default:
j('#content2 > div > div > ul > li > ul > li').css('color', 'red');