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.
Related
Could you please help me in dynamically calling attrib value through jQuery from the 'li class' by identifying the 'itemprop'?
My HTML is as below,
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
I want to dynamically call Model value into a JS code i.e., 32LJ573D
console.log($('ul li[itemprop="model"].specText').first().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
You need to pick li inside your ul with a specific class. The following code will work for you. I have printed text of li with class "specText" for reference. You could modify any attribute as per your requirement.
console.log($('ul li[itemprop="model"].specText').first().text());
When you choose elements by classname, multiple elements are returned in an array. So choose the first element by adding index [0].
$('.classname')[0].innerHTML
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
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');
Well I was having a hard time to call a certain element.
What I was supposed to do is get the
li.parent.iced-tea span a element. But the problem is it also affects the LEVEL2 li span a tag.
<li class="level1-parent has-children level1 parent iced-tea open">
<span class="vertnav-cat"><span>iced tea</span></span>
<ul>
<li class="first level2-active level2 active iced-ceylon-gold">
<span class="vertnav-cat"><span>iced ceylon silver</span></span>
</li>
</ul>
</li>
So I was wondering, how to get the exact child without going to other element.
Here's the code that I'm calling.
$("#vertnav ul li.iced-tea span a")
Any solution for this stuff?
Use a child selector (>):
$("#vertnav ul li.iced-tea > span a")
In other words, only select span links that are direct children of li.iced-tea elements.
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);