ul in li , tree display with jade - javascript

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)

Related

Get number of <li> in any <ul> using javascript

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]

select li element based on the 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

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).

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