如何使用js / jquery按列优先选择表元素？

user1214678 发表于 Dev

用户名

给出下表：

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