给出下表:
====|=====|=====|=====|
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
HTML中的表由行定义,然后由列定义。因此,使用javascript选择的元素的索引也遵循该顺序。因此,如果我选择所有数字“ 1”并将它们放在循环中。所选的第一个元素将是第一行中的第一个“ 1”。
假设“ 1”可以在该列中的任何位置(每列一个),我将如何选择第一列中的第一个?然后移至第二列并找到第二个数字“ 1”?
这是按行选择的循环:
//All '1's have a .one class
$("tr td.one").each(function(){});
============更新============
@Alex Char的答案是正确的。我对其进行了一些修改,以使其可以实现我所要实现的目标。他就是我最终使用他的解决方案的方式:
var all_ones = [];
$(".one").each(function(){
//Loop through all 1s get the td index and it's parent (tr) index.
all_ones.push([$(this).index(),$(this).parent().index()]);
});
//Sort all_ones by the td index
all_ones.sort(function(a, b) {
return a[0] - b[0];
});
//Loop throught the sorted index and print whatever
for(var i=0;i < all_ones.length;i++){
$("table tr:eq(" + all_ones[i][1] + ") td:eq(" + all_ones[i][0] + ")").css({color:"red"});
}
您可以尝试使用.sort()*,例如:
var cells = $('table td').sort(function(a, b) {
//compare the cell index
var c0 = $(a).index();
var c1 = $(b).index();
if (c0 == c1) {
//compare the row index if needed
var r0 = $(a).parent().index();
var r1 = $(b).parent().index();
return r0 - r1;
} else
return c0 - c1;
});
//console.log(cells);
cells.each(function() {
if ($(this).html() == "1") {
$(this).css("background", "red");
}
document.write($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>0</td>
<td>0</td>
<td class="one">1</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="one">1</td>
</tr>
<tr>
<td class="one">1</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td class="one">1</td>
<td>0</td>
<td>0</td>
</tr>
</table>
* .sort()并不是jquery的正式组成部分。
参考
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句