排序索引元素

Question

我想写下我的表的第一列上每行的数量。 我有几个DOM元素与指定的类studentCounter。

我尝试以下：

$('.studentCounter').each(function (i) { 
    $(this).html(i + 1); 
}) 

然而它返回号码，如：1，10，2，3 ..等。

然后我排序的元素的索引是这样的：

var studentItems = []; 

$('.studentCounter').each(function (i) { 
    studentItems.push(i + 1); 
}) 

studentItems.sort(function(a, b) { return a - b }); 

它返回的相同。 谢谢您的阅读

Answer 1

如果我理解正确，您希望每行都有编号。如果是这样，请看Snippet。 详细信息评论在片段中。

注：作为例子就是现在，如果你有一个以上的<tbody>或<table>将继续不断号码的第一列。如果这不符合要求的行为，您必须稍微改变选择器。除非你提供更多的HTML，否则我无法告诉你。

代码片段

/* The selector is: 
 
|| Find the first <td> of every <tr> of every <tbody> 
 
|| each() <td> found under that criterion... 
 
|| ~~(referenced as $(this) on second line)~~ 
 
|| ...set it's text content to it's index number (var idx) 
 
|| offset by 1 (+1). 
 
*/ 
 
$('tbody tr td:first-of-type').each(function(idx, td) { 
 
    $(this).text(idx + 1); 
 
});

table { 
 
    border: 1px solid black; 
 
} 
 
td, 
 
th { 
 
    border: 1px dashed red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Row</th> 
 
     <th>Col 1</th> 
 
     <th>Col 2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Row</th> 
 
     <th>Col 1</th> 
 
     <th>Col 2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
    </tr> 
 
    </tbody> 
 
</table>