I was wondering how to count all the list items inside a div.
<ul class="menu">
<li>Home
</li>
<li>Contact
</li>
<li><a>Information</a>
<ul>
<li>History
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li><a>Tutorials</a>
<ul>
<li>HTML/CSS
</li>
<li>Javascript
</li>
<li>Jquery
</li>
<li>PHP
</li>
</ul>
</li>
<li>Structure
</li>
</ul>
How do I count all the list elements inside ul class=menu? And not the list items who are in a deeper UL.
What I mean is how to count Home, Contact, Information, Tutorials, Structure, and not the list elements who are inside these I just mentioned.
Of course I did some research but couldn't find the correct answer.
Here is somewhat of a duplicate: jQuery: Count number of list elements?
Use the > child selector:
$('ul.menu>li').length
Or .children():
$('ul.menu').children('li').length
The other question is in jQuery, so I answer for jquery, try this to count your li elements
var count = $('ul.menu').children('li').length;
DEMO
Related
I have a HTML code of nested list giving me a hard time to read with jQuery!
I'm using
$.get();
to get the html then using
$(data).find(".thelist ul");
To get the list only which looks like
<ul>
<li>Draft Page
<ul>
<li>Batch Version 7</li>
</ul>
</li>
<li>info Control System
<ul>
<li>About info</li>
</ul>
<ul>
<li>Application
<ul>
<li>Functionality
<ul>
<li>
Access
</li>
</ul>
<ul>
<li>Login
</li>
</ul>
<ul>
<li>info Desktop
</li>
</ul>
<ul>
<li>Search
</li>
</ul>
<ul>
<li>info Mobile
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Support</li>
</ul>
<ul>
<li>Technical Manual
<ul>
<li>Formatting
</li>
</ul>
<ul>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
</li>
</ul>
The actual list is more than 200 item! and it can go up to 7 levels!
What im getting is every item that has children the text is including all of their text!.
I need to get the text and the link of each then append or generate my own list with same level but different html structure
Is this the best approach ?
I have tried iterating using $each()
try this it will give all titles with links.
$(function(){
var links = [];
$( "ul" ).find( "a" ).each(function(k,v){
links.push({ title : $(v).text(), link : $(v).attr('href'), level : $(v).parents('ul').length });
});
console.log(links);
});
Assuming the <ul> you've shown above is the one inside the .thelist block.
I think it'll be easier if you just use $(data).find(".thelist ul li") to get all the list items inside the <ul> element (and subelements).
Or, if you want to go down just one level, you can do $(data).find(".thelist ul>li").
And, you can use the following method to avoid selecting children nodes:
$("#foo")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
I got this removing children idea from here.
I hope this helps.
<li>
<a>Parent Node</a>
<ul>
<li><a>Child 1</a></li>
***<li><a>Child 2</a></li>***
</ul>
</li>
I need to find 'UL' tag and I want to appendTo Child 3 inside 'Ul' at run time.
I'm able to insert the first child but Second child is not inserting.
Can anybody help on this?? thanks..
You can use the :nth-child() Selector to achieve this as in this:
// Javascript
$("ul li:nth-child(2)").append("<li><a>Child 3</a></li>");
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a>Parent Node</a>
<ul>
<li><a>Child 1</a>
</li>
<li><a>Child 2</a>
</li>
</ul>
</li>
$("ul").append('<li><a>Child3</a></li>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
<a>parent Node</a>
<ul>
<li><a>Child1</a></li>
<li><a>Child2</a></li>
</ul>
</li>
I cant see your image. Do you looking for the :nth-child(3) selector ?
http://www.w3schools.com/cssref/sel_nth-child.asp
This is my original menu.
<ul class="mymenu">
<li>1 HTML </li>
<li>2 CSS
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
</ul>
</li>
<li>3 Javascript </li>
</ul>
I want to convert it into
<ul class="mymenu">
<li>1 HTML </li>
<li>2 CSS <span class="parent">▼</span>
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
</ul>
</li>
<li>3 Javascript </li>
</ul>
The difference between two menu is,
<span class="parent">▼</span>
I want to add dropdown arrow to the each element which has submenu.
I want Jquery or javascript solution.
I will provide two solutions to the problem.
1). Javascript solution. Using jQuery you can achieve it pretty easy:
$('a + ul').prev('a').append('<span class="parent">▼</span>');
Demo: http://plnkr.co/edit/37k1KMpqJ6G2tPrvprBa?p=preview
2). CSS only solution. Using modern pseudo selectors you can do this:
li a:not(:only-child):after {
content: '\25bc';
}
Additional info: :only-child and :not selectors. Support: IE9+.
Note: CSS solution is not equivalent to javascript one, as it doesn't insert span.parent element in DOM.
Demo: http://plnkr.co/edit/sfoctCWzjRCBlXG9dVyD?p=preview
I am trying to build url based on a user selection from a multilevel list.
The user selects four options which in turn will create the url required for retrieval of a document.
Example:
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
So I would select the Report Name > Year > Month and this would build a url which equals the path to the file.
e.g. http://www.example.com/Report1/2010/Jan
Does anyone perhaps have any ideas as to how this can be done.
Here is an example of $(this) being used to get the value of what was clicked. I'm using JQuery in this example.
Had to add an id to the year value. You don't HAVE to do it this way, you can use the jquery selectors to get the proper value. It is just a lot easier.
<ul id="nav">
<li>Report name
<ul>
<li>Year
<ul>
<li id='2010'>2010
<ul>
<li>Jan</li>
<li>Feb</li>
<li>March</li>
</ul>
</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
</ul>
</li>
</ul>
</li>
<!-- etc. -->
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
The javascript looks like this:
$('#2010 li').click(function()
{
var year=$(this).parent().parent().attr('id');
var month=$(this).text();
console.log(month+' '+year);
//this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
});
Ok there are several options, I would suggest using javascript.
So, basically, you would check if an <li> was clicked and if it was, then add a certain value to string, the redirect the page using that built string. Here is an example of what I mean:
http://jsfiddle.net/35XDn/4/
I created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance
If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.