select li element based on the ul - javascript

how I can select the second ul li element, I have this structure:
HTML
<ul>
<li></li>
<ul>
<li>I want to select this</li>
</ul>
</ul>

Firstly your HTML is invalid. You cannot have ul as a child of another ul. It must be within an li. Also the text within the ul must also be within a li.
<ul>
<li>
<ul>
<li>I want to select this</li>
</ul>
</li>
</ul>
To then select this in jQuery you can use:
$('ul > li > ul > li:first');
You could also use the less strict: ul ul li:first, depending on how rigidly you need to adhere to the HTML structure you defined.

the structure you provided is not proper, the child <ul> tag should go inside an <li> tag.
then the structure will be like
<ul class="ul">
<li></li>
<li>
<ul>
<li>I want to select this </li>
</ul>
</li>
</ul>
then you can get that child <ul> using jquery as
$(".ul li ul");
hope this helps.

Try this snippet with multiple options.
console.log($('ul > ul > li:eq(0)').text());
//OR
console.log($('ul').find('ul > li:eq(0)').text());
//OR
console.log($('ul').children('ul').find('li:eq(0)').text());
//OR
console.log($('ul > ul').find('li:eq(0)').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul><b>First ul</b>
<li>First li</li>
<ul> <b>Second ul</b>
<li>First li in second ul</li>
</ul>
</ul>

First you must add a class or an id to your parent ul :
<ul class="root">
<li></li>
<ul>
I want to select this <li></li>
</ul>
</ul>
Then, either your choose to select the 2nd one because it will always be the second (index 1) :
$(".root").find("li").eq(1)
Or you add a class to your <li>:
<ul class="root">
<li></li>
<ul>
I want to select this <li class="myLi"></li>
</ul>
</ul>
And then
$(".root").find(".myLi")

You can use querySelector to do that. Check below example.
var li = document.querySelector('ul ul li');
console.log(li.innerHTML);
<ul>
<li>Not this</li>
<ul>
<li>I want to select this</li>
</ul>
</ul>

Related

Slide up multiple <ul> elements using jQuery

I am trying to construct a jquery statement that will slideUp() all <ul> elements whose siblings don't contain a set of specific classes (.clicked, .chosen).
Suppose I have the following nested <ul> structure:
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>
For the above example, I would like to slideUp() only the 'Cats' <ul> element ('Sylvester', 'Felix', 'Garfield') because none of it's elements use the 'chosen' or 'clicked' classes.
My current jquery statement reads:
$('.mainmenu').first().siblings().not('.clicked, .chosen').slideUp();
This, and everything else I have tried, returns nothing. Suggestions?
You HTML looks challenging :) but somehow, I've managed to create a query to perform what you're looking for.
And if you want to check multiple class for particular element you can use is() as well.
//Check li doesn't have clicked class and then filter ul next to the li
$('.mainmenu > li').not('.clicked').next('ul').filter(function(){
//Find the ul, if it's any of li doesn't have chosen class
if(!$(this).find('li').hasClass('chosen'))
{
return $(this);
}
}).slideUp();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
<li>Dogs</li>
<ul>
<li>Fido</li>
<li class="chosen">Barney</li>
<li>Turbo</li>
</ul>
<li>Cats</li>
<ul>
<li>Sylvester</li>
<li>Felix</li>
<li>Garfield</li>
</ul>
<li class="clicked">Hamsters</li>
<ul>
<li>Chubbs</li>
<li>Oreo</li>
<li>Ruby</li>
</ul>
</ul>

Finding Child of Parent Jquery

I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});

Jquery to create hierarchy with unordered list

I have an unordered list that when clicked shows their children. I am trying to add the feature where when there are children shown from a parent and a sibling of that parent is clicked, the other children close while the new ones open. Here is what I have so far:
<ul class="list">
<li> <a>Categories</a>
<ul>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This is my jquery:
$(document).ready(function(){
$('.list > li a').click(function(){
$(this).parent().children('ul').toggle();
});
Here is a jfiddle: https://jsfiddle.net/hmsvox5a/
Now if you click parent, the children show up. If you click another parent, its children appear as well. This leaves two sets of children open. I am trying to get the first set of children to close when I open the second. When I try to hide the siblings children, It messes up the whole jquery. Any ideas?
I'm not going to lie and tell you that this will scale or that it isn't awful, but this was the first thing I thought of off the top of my head. There are many ways to solve this.
$(document).ready(function(){
$('.list > li a').click(function(){
$('.open').parent().children('ul').toggle();
$('.open').removeClass('open');
$(this).addClass('open').parent().children('ul').toggle();
});
});
I believe what you want is this perhaps?
$(document).ready(function(){
$('.list > li a').click(function(){
$(this).parent('li').siblings('li').children('ul').hide();
$(this).siblings('ul').toggle().children().show();
});
});
test it out here: http://jsfiddle.net/vgwrqr6c/
I prefer to use CSS on the children to show items when its parent is shown. Then this efficient script works.
It keeps a reference to the last selected parent so it doesn't have to search the whole dom.
$(document).ready(function(){
var $selected;
$('.list > li a').click(function(){
if($selected){
$selected.remove class("open");
}
$selected = $(this).parent();
$selected.add class("open");
});
});
CSS would be something like this.
li ul{ display:none;}
li.open ul{ display: block}

Get <li> with child <ul> from <ul> child of <li>

I have a very simple example of a menu here:
<ul id="1">
<li>First</li>
<li>Second
<ul id="2">
<li>Second - 1</li>
<li>Second - 2</li>
<li>Second - 3
<ul id="3">
<li>Aaa</li>
<li>Bbb</li>
<li>Ccc</li>
</ul>
</li>
</ul>
</li>
<li>Third</li>
</ul>
I need to get the <li> that has a child <ul> and that is a child of <ul> who is a child of <li>, and apply a style to it.
I know it sounds complicated, but in the example above I want to get only the <li> that says "Second - 3" which is inside a ul, which is a child of a li and has a child ul. I don't want to get any other <li>s.
I can't do this without getting also the li which says "Second", and I don't want that.
$("li > ul").addClass('whatever');
Use $("li ul li:has(ul)")
e.g:
$(function(){
var items = $("li ul li:has(ul)");
alert(items.html());
});
Working example: http://jsfiddle.net/EXzaa/
Try this:
$("li > ul > li").each(function(){
if ( $(this).find("ul").length > 0){
$(this).css({"font-weight":"bold"});
}
});
Unless I get you wrong this is simple. Try something like this:
$('#3').parent('li').addClass('whatever');
This will select the parent node of the ul element with the id = 3 (only if it is an li element)

Select only immediate children

I have an arbitrarily deep list
<ul id="tehList">
<li>
<ul>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
</li>
</ul>
I have a jQuery object that references a specific li in this list. For example var tehList = $("#tehList li");
How can I select only the immediate children of tehList?
Thanks!
Travis
#tehList > *
http://www.w3.org/TR/CSS21/selector.html#child-selectors
simply do this :
$("#tehList li").children();
It'll select only the immediate child of tehlist's li

Categories

Resources