如何获取元素的第n个子编号答案

【问题标题】：How to get nth-child number of a element如何获取元素的第n个子编号
【发布时间】：2014-06-08 22:00:42
【问题描述】：

我不需要 .index() 值。

例如。当我有一个类似的列表时：

<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>

我需要按每个类获取订单号，并忽略索引计数列表中的另一个类，所以我需要像这样工作的东西：

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

然后结果会是这样的

<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>

我可以对其他类做同样的事情，比如：

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

这就是结果

<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>

请推荐

【问题讨论】：

为什么使用.not('.beta') 而不是.alpha？

标签： jquery class count indexing css-selectors

【解决方案1】：

each() 函数有一个索引值：https://api.jquery.com/jQuery.each/

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

【讨论】：

太棒了，我不知道我可以这样使用它。谢谢

【解决方案2】：

只需使用这个：

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

您可以将函数传递给.text()。在该函数中，第一个参数是堆栈中元素的索引。由于是基于0-index的，所以返回前需要加1！

这里有一个小提琴：http://jsfiddle.net/wqLXA/1/

另外，您可以直接使用$(.alpha) 或$('.beta')，而不是使用.not。这将加速这个过程。

【讨论】：

【解决方案3】：

因为每个都提供了一个索引，您可以添加到它以获得第 n 个子编号 -

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

示例 - http://jsfiddle.net/jayblanchard/3eYQS/

【讨论】：

【解决方案4】：

如果您想对同一个函数但对不同的类有不同的计数（基本上在您的示例案例中同时对 beta 和 alpha 进行单独的计数），试试这个：

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

这会给你一个类似的结果：

<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

【讨论】：

【解决方案5】：

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

【讨论】：