I have some simple list items with link elements inside.
In the example below, what Javascript function could I use to add class="selected" to the link inside the "coffee" list on page load.
<li class="coffee">
.....
</li>
<li class="tea">
.....
</li>
<li class="coke">
.....
</li>
<li class="beer">
.....
</li>
You can chain selector items to target child elements:
$('li.coffee a').addClass('selected');
This targets any a which is a descendant of any li with the class coffee. You can also restrict it to immediate child elements:
$('li.coffee > a').addClass('selected');
Related
I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.
Here is my HTML:
<li class="level1">
<span class="level1 drop-down clicked">Oranges</span>
<ul class="level2" style="display: block;">
<li class="level2">Peel</li>
<li class="level2">Pips</li>
<li class="level2 active">Pegs</li>
</ul>
</li>
I've tried
jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();
but it does not work. I'm not sure if I'm using the parent & children method's properly.
Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.
Try this:
jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');
Because the li.level1 is two steps up, you need .parents(), which selects up multiple levels, instead of .parent(), which is only one.
jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
^^^^
I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>
Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});
You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();
I have nested lists and I need to style every items. Normally I would do something like this:
$('#myList li').addClass('myClass');
However, because they are nested, I need to style just text, I suppose. How do I do this with jQuery? I thied this, but it did not work:
$('#myList li').text().addClass('myClass');
Here's HTML
<ul id="myList">
<li>
item 1
</li>
<li>
item 2
<ul>
<li>
asdasd
</li>
</ul>
</li>
</ul>
I NEED TO StYLE EVERY LIST ITEM
first level, direct child
$('#myList > li').addClass('myClass');
second level AND higher
$('#myList li li').addClass('myClass');
This subject is largely documented on jquery api selector page
Now your question has been edited : you need to style ALL list items :
CSS
li { /* will affect ALL list-items */}
Now you made it clearer :
Wrapping what's inside the LI element
$('li').wrapInner( "<span class='your-css-selector'></span>" );
Now you shown that you won't search more than a copy-paste solution :
Wrapping what's inside the LI element but not what resides in another inner-element
$('#myList li').each(function(){
$(this).contents().first().wrap("<span/>")
});
credit to user PLS copy-pasted from his comment.
You cannot just style text.
You can specifically style the nested list items by doing this:
$('ul#myList > li > ul > li').addClass('myClass');
This will add the myClass class to the item that has the text asdasd in your example
Just wrap your text in a span and apply class on them. When you apply class on li all of its contents gets impacted hence any descendants as well like nested ul under the li. Instead just wrap the texts in an element and apply class to them.
<ul id="myList">
<li>
<span>item 1</span>
</li>
<li>
<span>item 2</span>
<ul>
<li>
<span>asdasd</span>
</li>
</ul>
</li>
</ul>
and
$('#myList li > span').addClass("myClass");
With this you could just handle it using Css rule itself.
I have a navigation that's a unordered list, here's the simple structure I'm following / have to follow for my jQuery plugin to work correctly, therefore making this code structure a necessity:
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<ul id="demo1" class="nav">
<li>
Devices
<div class="mp-level">
<h2>Devices</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Mobile Phones</li>
<li>Televisions</li>
<li>Cameras</li>
</ul>
</div>
</li>
<li>
Magazines
<div class="mp-level">
<h2>Magazines</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>National Geographic</li>
<li>Scientific American</li>
</ul>
</div>
</li>
...
</ul>
</div>
</nav>
I need to provide a fallback and I have selected another jQuery plugin that needs to use a different structure to the above. I need to remove the DIV's with classname .mp-level but still keeping all unordered lists including .mp-level child lists.
The result will just be unordered lists without headings and DIV'S. My code below is removing the correct elements but my issue is with re-inserting the child unordered lists (specifically level 2):
$( "#demo1 h2, .mp-back" ).remove();
$( ".mp-level ul li .mp-level" ).detach();
$( ".mp-level ul li" ).append('.mp-level ul li .mp-level ul');
Anyone got any advice how to re-insert child UL's after I have removed their parents?
you can do this
$("#mp-menu").find(".mp-level").each(function(i,n){//each ".mp-level"
$(n).parent().append($(n).children());//append children to parent
$(n).remove();//remove actual div
});
http://jsfiddle.net/WBWwG/
You can save the detached nodes (wrapped inside a jQuery object) by assigning them to a variable and then using that variable in the .append() call.
Something like this:
// this selector doesn't select anything from the example html, btw
var $mp_level = $( ".mp-level ul li .mp-level" ).detach();
$(".mp-level ul li").append($mp_level);
I am trying to change the css class of the parent list item when a child list is hovered. For example, I have:
<ul class="ipro_menu">
<li class="menu-first">
First
<ul class="sub-menu">
<li>Other A</li>
<li>Other B</li>
</ul>
</li>
<li class="menu-second">Second</li>
</ul>
So, what I'm trying to accomplish is when a .sub-menu li element is hovered, change the class of the parent li it resides in. In this example, if li containing "Other A" or "Other B" is hovered, change the class of the li.menu-first.
I've tried:
$('.sub-menu li').hover(function(){
//$(this).closest('.ipro_menu li').addClass('color_a');
//$(this).parent().addClass('color_a');
//$(this).parents('li').prev().addClass('color_a');
// None of the above 3 worked...
});
I think you just want:
$(this).parents("li").addClass("color_a")
That should work. I don't know why you added .prev() in your attempt.