How to get nth-child number of a element

Question

I don't need the .index() value.

Eg. when i have a list like:

<ul>
    <li class="alpha"></li>
    <li class="alpha"></li>
    <li class="alpha"></li>
    <li class="beta"></li>
    <li class="alpha"></li>
    <li class="beta"></li>
    <li class="beta"></li>
    <li class="alpha"></li>
    <li class="beta"></li>
    <li class="beta"></li>
</ul>

i need to get the order number by each class, and ignore the another class in the index count list, so i need something that work like this:

jQuery('ul li').not('.beta').each(function(){
    jQuery(this).text(get nth-child(THIS NUMBER) here);
});

and then the result would be like

<ul>
    <li class="alpha">1</li>
    <li class="alpha">2</li>
    <li class="alpha">3</li>
    <li class="beta"></li>
    <li class="alpha">4</li>
    <li class="beta"></li>
    <li class="beta"></li>
    <li class="alpha">5</li>
    <li class="beta"></li>
    <li class="beta"></li>
</ul>

i could do the same with the other class, like:

jQuery('ul li').not('.alpha').each(function(){
    jQuery(this).text(get nth-child(THIS NUMBER) here);
});

and this is the result

<ul>
    <li class="alpha"></li>
    <li class="alpha"></li>
    <li class="alpha"></li>
    <li class="beta">1</li>
    <li class="alpha"></li>
    <li class="beta">2</li>
    <li class="beta">3</li>
    <li class="alpha"></li>
    <li class="beta">4</li>
    <li class="beta">5</li>
</ul>

Please suggest

Answer 1

The each() function has an index value: https://api.jquery.com/jQuery.each/

jQuery('ul li').not('.beta').each(function(index){
    var count = index + 1;
    jQuery(this).text(count);
});

Answer 2

Simply use this :

jQuery('ul li').not('.beta').text(function(i){
    return i+1;
})

You can pass a function to .text(). In that function, the first argument is the index of the element in the stack. Since it is based on a 0-index, you need to add 1 before returning it!

Here a fiddle : http://jsfiddle.net/wqLXA/1/

Also, instead of using .not, you could directly use $(.alpha) or $('.beta'). That would accelerate the process.

Answer 3

Because each provides an index you can add to it to get the nth-child number -

jQuery('ul li').not('.beta').each(function(index){
    var nth = index + 1; // because of zero based indexes 
    jQuery(this).text(nth);
});

Example - http://jsfiddle.net/jayblanchard/3eYQS/

Answer 4

If you want a different count on the same function but for different classes (basically a separate count for beta and alpha at the same time in your sample case), try this:

jQuery('ul li').each(function(){
    var $current = jQuery(this);
    $current.text((jQuery('ul li.' + $current.attr('class')).index($current) + 1));
});

This will give you a result like:

<ul>
    <li class="alpha">1</li>
    <li class="alpha">2</li>
    <li class="alpha">3</li>
    <li class="beta">1</li>
    <li class="alpha">4</li>
    <li class="beta">2</li>
    <li class="beta">3</li>
    <li class="alpha">5</li>
    <li class="beta">4</li>
    <li class="beta">5</li>
</ul>

JSFiddle Demo

Answer 5

var index=1;
$('ul li').not('.alpha').each(function(){   
    $(this).text(index);
    index=index+1;
});