Develop Reference

jQuery iterate nested html list

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.

in angularjs how do i get $index for each LI within different div

here is my code snippet.
<div>nike</div>
<ul>
<li id="cat-{{$index}}">csj</li>
<li id="cat-{{$index}}">appliance</li>
</ul>
<div>hulk</div>
<ul>
<li id="cat-{{$index}}">toys</li>
<li id="cat-{{$index}}">t-shirt</li>
</ul>
If i have to put angular snippet it would look like
<ul>
<li ng-repeat="name in category" id="cat-{{$index}}"></li>
</ul> //output : csj, appliances
<ul>
<li ng-repeat="desc in data" id="cat-{{$index}}"></li> //output: toys, t-shirt
</ul>
When I am trying to access "toys" by saying cat-2. It is returning me an error. When I inspected in chrome. it is giving ids as
csj - cat-0
appliances - cat-1
toys - cat-0
t-shirt - cat-1
I want it to be in ascending order meaning toys should have id cat-2 and t-shirt should have id cat-3.
Any help would be great. Is it even possible?

$index is part of the ng-repeat scope. If you do a ng-repeat you could use it like this:
<ul>
<li ng-repeat="myLi in myArray" id="cat-{{$index}}"></li>
</ul>

Angularjs json ng-repeat displays items properties only with manual iterator

Im getting json from some web service and displaying it with ng-repeat but i can't seem to display item properties.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item}}</p>
</li>
</ul>
This works and will display all json
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item.name}}</p>
</li>
</ul>
This doesnt work.
<ul>
<li data-ng-repeat="item in itemList">
<p>{{item[0].name}}</p>
</li>
</ul>
This works but will only display 1 item.
I just started working with angular and i feel im missing something becouse of it, if needed ill try to post a jfiddle of a sample.
UPDATE
im tring to get twitch.tv stream info
https://github.com/justintv/Twitch-API/blob/master/v2_resources/streams.md#get-streams
raw json from 2 streams, what i get from the first example
http://pastebin.com/bQLqu9BR
UPDATE 2
my code
http://plnkr.co/edit/3eOZ598zt2hkrJcsOLhP

Hmmm... I seem to be able to work with the sample data you provided.
See the following:
http://plnkr.co/edit/M3TQ4qI1DJPtgv6jCQLy?p=preview
Snippet:
<ul>
<li ng-repeat="item in srcData">
<p ng-bind="item.game"></p>
<p ng-bind="item.channel.display_name"></p>
<p ng-bind="item.channel.url"></p>
</li>
</ul>

You don't need to include an index for each item to display its properties, every item knows its index number and you can access it using the $index variable.
Check this out:
http://plnkr.co/edit/ECyyFYVupVG7mKqwsGaB
<ul>
<li ng-repeat="item in itemList">
{{$index}}
<p>
Game: {{item.game}}
</p>
<p>
Channel Name: {{item.channel.name}}
</p>
</li>
</ul>

Create a URL based on Selection in <ul> <li>

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/

Design Tree Structure With CSS

How can i design following kind of structure with HTML/CSS ?
Please provide Any reference sites links if you have
EDIT:
Sorry if you are not getting my question, its just that i don't know much about designing so
What i am trying to build is Tree structure but i don't know what HTML tags i should use and how will i draw these lines so just need your help for this. if you have any idea how accomplish this than please share.
Thank you.

https://github.com/wesnolte/jOrgChart
This is a beautiful jQuery plugin which does exactly what you want.
Code Sample:
Let's say that this is your unordered list.
<ul id="org">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<ul>
<li>Pumpkin</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
Add a dummy div like this
<div id="chart" class="orgChart"></div>
Now,you could simply use
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
});
To render your unordered list into a directory tree/organisational chart structure.