排序索引元素

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>