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]
Related
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>
Need to change the width of the drop-down menu, depending on the number of nested ul.
if( $('.mg-main-menu li .submenu li ul').size() == 1 )
{
$('.mg-main-menu li .submenu').css({"width" : "250px"});
};
if( $('.mg-main-menu li .submenu li ul').size() == 2 )
{
$('.mg-main-menu li .submenu').css({"width" : "500px"});
};
if( $('.mg-main-menu li .submenu li ul').size() == 3 )
{
$('.mg-main-menu li .submenu').css({"width" : "750px"});
};
if( $('.mg-main-menu li .submenu li ul').size() == 4 )
{
$('.mg-main-menu li .submenu').css({"width" : 1000px"});
};
Structure
<ul class="mg-main-menu">
<li>
<ul class="submenu">
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="submenu">
<li>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="submenu">
<li>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="submenu">
<li>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
Code does not work :)
How to write working code with the property $(this)
Width should be applied precisely to the desired category, and not all.
I can not understand how to do, please help.
I think you're looking for something like this:
$('.mg-main-menu li .submenu').each(function () {
$(this).css({
width: (250 * Math.min($('li ul', this).length, 4)) + 'px'
});
});
(remove the Math.max() call if you don't want to limit the width).
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 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