I need to index through the li's for a given ul

I have a ul which contains three or more li's. I need to index through and set the text.

What's the syntax for that?

Thanks!
newbiewebSr. Software EngineerAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Gurvinder Pal SinghConnect With a Mentor Commented:
if you just want to get li element at 0,1 and 2 index position, then why don't you simply use nth-child selector
http://api.jquery.com/nth-child-selector/
var li1 = $("ul li:nth-child(0)");
var li2 = $("ul li:nth-child(1)");
var li3 = $("ul li:nth-child(2)");

0
 
Gurvinder Pal SinghConnect With a Mentor Commented:
something like this

$("ul li").each(function(){
var index = $(this).index();

switch(index)
{
   case 0:
      $(this).html("zero");
   break;
   case 1:
      $(this).html("one");
   break;
   case 2:
      $(this).html("two");
   break;
   case 3:
      $(this).html("three");
   break;
}
 
});
0
 
leakim971PluritechnicianCommented:
$("ul>li").each(function() {
    $(this).prepend( $(this).index("ul>li") );
})

Open in new window


test page : http://jsfiddle.net/Jvuk9/
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
mykdeConnect With a Mentor Commented:
Syntax:
$("ul li").each(function() {
    $(this).prepend( 'Index = ' + $(this).index());
})

Open in new window


Output:
Index = 0
Index = 1
Index = 2
Index = 3
Index = 4
Index = 5

Open in new window

0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks. But I was really thinking about the get() function or treating the selector as an array. I would like the zero'th element in one line. I'd like 0, 1, and 2 elements and use three lines to get them.

I thought it was easy but could not finc the syntax.


Any ideas on that?

0
 
newbiewebSr. Software EngineerAuthor Commented:
Also, as an aside, please explain why this print two columns of numbers:

$("ul>li").each(function() {
    $(this).prepend( $(this).index("ul>li") );
})
$("ul>li").each(function() {
    $(this).prepend( $(this).index("ul>li") );
})

thusly:
11
22
33
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
for each li you add the position/index of the li in the ul at the beggining, inside the li.
you do the same thing two times
0
 
newbiewebSr. Software EngineerAuthor Commented:
any way you could explain that more clearly? I see it's the same code, I just ran it as a test.

I expected:
1
2
...
10
1
2
...
10

but am new to this. Where is the position referenced?
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
try this, it may help you understand : http://jsfiddle.net/Jvuk9/2/
0
 
newbiewebSr. Software EngineerAuthor Commented:
I ran that on fiddle and became curious how the position was set, hence my question.

I will ask that in another question though. Let's get back to the main question: getting the selector at a given index.

such as .get(2) or [2] syntax.

Do you now how to do this?

0
 
newbiewebSr. Software EngineerAuthor Commented:
0
 
mykdeConnect With a Mentor Commented:
The reason is due to the function .prepend() which is adding the value to the beginning of the content in the li element.  When you run it again you are again adding the index number to the beginning of the content.
Start with:
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

Open in new window

Run it once:
<ul>
 <li>0</li>
 <li>1</li>
 <li>2</li>
</ul>

Open in new window

Twice:
<ul>
 <li>00</li>
 <li>11</li>
 <li>22</li>
</ul>

Open in new window

Third time:
<ul>
 <li>000</li>
 <li>111</li>
 <li>222</li>
</ul>

Open in new window

0
 
newbiewebSr. Software EngineerAuthor Commented:
I see. Prepend. That makes sense. But I should not have detracted from my primary question:

I really need to understand how to use .get(2) or the array syntax to pull an item out of a selector.
0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks!
0
All Courses

From novice to tech pro — start learning today.