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
Related
I have a code in which I need to find the number of li tags, not the nested ones.
<ul class="ulStart">
<li>
<ul class="ulNested">
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
Doing
document.querySelector('.ulStart').getElementsByTagName('li')
Gives me 4 <li>, which is not what I want, I want the number of li tags present in ulStart. Let me know if there is any way to do so. No jQuery, pure javascript.
let count = document.querySelectorAll("ul.ulStart > li").length;
console.log(count);
<ul class="ulStart">
<li>
<ul class="ulNested">
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
Use the > (direct child) CSS selector. See MDN - Child selectors.
console.log(document.querySelectorAll('.ulStart > li').length);
<ul class="ulStart">
<li>
<ul class="ulNested">
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ul class="ulStart">
<li>
<ul class="ulNested">
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
Try use the following query selector:
console.log(document.querySelectorAll('.ulStart > li').length);
Results in:
HTMLCollection(2) [li, li]
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have li elements as shown below. I want to provide background color to the first li within the main li tags,
For example consider the li with id="mli1970", Now I want to color the first li within this element.
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
<li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" id="mli1837">1837
<ul>
<li></li>
</ul>
</li>
<li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" id="mli1970">1970
<ul>
<li></li>
<li></li>
</ul>
</li>
<li data-group-id="ffabab46-df77-40af-fe86-710284837703" id="mli1945">1945
<ul>
<li></li>
</ul>
</li>
<li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" id="mli1978">1978
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
Jquery Solution
To get hold of first child use eq() selector and specify the index of the child, starting from 0.
$('#mli1970 li:eq(0)') // this selects the first 'li' inside your `li` with id mli1970
$('#mli1970 li:eq(0)').css('background-color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
<li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" id="mli1837">1837
<ul>
<li></li>
</ul>
</li>
<li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" id="mli1970">1970
<ul>
<li></li>
<li></li>
</ul>
</li>
<li data-group-id="ffabab46-df77-40af-fe86-710284837703" id="mli1945">1945
<ul>
<li></li>
</ul>
</li>
<li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" id="mli1978">1978
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
Also as a CSS Solution you can do the following
#mli1970 li:first-child
#mli1970 li:first-of-type
#mli1970 li:nth-child(0)
#mli1970 li:nth-of-type(0)
Ofcourse the same selectors can be used in Jquery selectors as well.
Try this:
$(".chlk-timeline-years > li:first-child").css('background-color', '#F00');
or
$(".chlk-timeline-years > li:first-child ul li:first-child").css('background-color', '#F00');
Use
$('#mli1970 li:first-child').css('background-color','blue');
See The Snippest :
$('#mli1970 li:first-child').css('background-color','cyan');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
<li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" id="mli1837">1837
<ul>
<li></li>
</ul>
</li>
<li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" id="mli1970">1970
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li data-group-id="ffabab46-df77-40af-fe86-710284837703" id="mli1945">1945
<ul>
<li></li>
</ul>
</li>
<li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" id="mli1978">1978
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
$('#mli1970 li').css({
background: 'red'
});
Resources:
http://api.jquery.com/category/css/
http://www.w3schools.com/css/css_list.asp
As explained in https://api.jquery.com/nth-child-selector/:
$( "ul li:nth-child(2)" ).css('background-color', '#F00');
Here is the solution, Each first occurred li under main li will be colored red
$('.chlk-timeline-years li[data-action="data-color"]').each(function () {
$(this).find('li').eq(0).css("background-color","red");});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="chlk-timeline-years" id="chlk-timeline-decades">
<li data-group-id="e4b5b419-9bf2-42dd-ecf5-6750ae5c0365" data-action="data-color" id="mli1837">1837
<ul>
<li></li>
</ul>
</li>
<li data-group-id="7ead4d3a-a020-4e87-c5ca-f8043047c954" data-action="data-color" id="mli1970">1970
<ul>
<li></li>
<li></li>
</ul>
</li>
<li data-group-id="ffabab46-df77-40af-fe86-710284837703" data-action="data-color" id="mli1945">1945
<ul>
<li></li>
</ul>
</li>
<li data-group-id="85bdb673-6287-48fd-808c-9aa64accc12e" data-action="data-color" id="mli1978">1978
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
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>
I have a object of object of object ... i have a tree !
i use this jade code for display my tree :
mixin file_list(files)
ul
each file, i in files
li #{file.id}
if file.children.length > 0
mixin file_list(file.children)
but the result is:
<ul>
<li></li>
<ul>
<li></li>
</ul>
</ul>
i need :
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
mixin file_list(files)
ul
each file, i in files
li #{file.id}
if file.children.length > 0
mixin file_list(file.children)
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)