Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 264
  • Last Modified:

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!
0
newbieweb
Asked:
newbieweb
  • 7
  • 3
  • 2
  • +1
6 Solutions
 
Gurvinder Pal SinghCommented:
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
 
mykdeCommented:
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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
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
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
mykdeCommented:
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
 
Gurvinder Pal SinghCommented:
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
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 7
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now