Question

鉴于下表：

====|=====|=====|=====|
 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"});

}

Answer 1

您可以尝试使用.sort()*，如：

＆＃13;

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());
});

＆＃13;

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

＆＃13;

* .sort（）不是jquery的正式组成部分。

<强>参考

.sort()

Answer 2

我不确定我理解你。我相信你问的是如何一次循环一列而不是行。如果这不正确，请纠正我。

要看，你会做类似的事情：

var onesInRows = [];
for(var i = 1; i <= numberOfColumns; i++){
    onesInRows.push($('tr') //get all table rows
                         .find('td.one:nth-child('+i+')'))
                            //get the tds,
                            //that have class one,
                            //that are in the row you are currently selecting
}

第一行中的第一行是：

onesInRows[0].eq(0);

第二行中的第一行是：

onesInRows[1].eg(0);

这一切都有意义吗？

更新：如果你想在一个jQuery对象中使用所有的那些：

var onesInAllRows;
for(var i = 1; i <= numberOfColumns; i++){
    var onesInRow = ($('tr') //get all table rows
                         .find('td.one:nth-child('+i+')'))
                            //get the tds,
                            //that have class one,
                            //that are in the row you are currently selecting
    if(onesInAllRows.length !== 0){
       onesInAllRows.add(onesInRow);
    }
    else{
       onesInAllRows = onesInRow;
    }
}

Answer 3

您可以像这样使用nth-child选择器Documentation：

$( "tr td.one:nth-child(1)" )

如果您只想要第一个可以使用的第一列，这将为您提供在第一列中标记为第一类的所有td

$( "tr td.one:nth-child(1)" ).first()

请参阅JSFiddle

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

3 个答案: