Question

我正在使用循环来查找包含具有特定类的单元格的整个表格列，并且它适用于应用类和下面的其他内容。唯一的问题是我还想输出一次单元格的值。这有可能吗？

$('td:first-child').each(function() {
    for (var i = 0; i <= 5; i++) {
        var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;  
        if (col == 5) {
            $(".bingocl").fadeIn(2000);
            var column = $('.tabell tr').find('td:nth-child(' + i + ')');
            column.addClass("bingo", 2000);  
            var text = column.text().toUpperCase(); 
            $("#textout").append(text + "!!");         
        }
    }
});

更新

  $('td:first-child').each(function() {
    for(var i = 0; i <= 5; i++) {
    var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
    var column = $('.tabell tr').find('td:nth-child(' + i + ')');
    if (col == 5) {
    $( ".bingocl" ).fadeIn(2000);
    column.addClass("bingo", 2000);             

column.each(function() {
  $("#textout").append($(this).html() + " ");
});
break;
      }
    }
});

完整的功能：

var main = function() {

  //Styling the rows 
  $(".tabell tbody").find("tr").each(function(idx) {
    var row = $(this);
    if (row.find("td").length == row.find("td.check").length) {
      row.addClass("bingo");
      $(".bingocl").fadeIn(2000);
      var text = row.find("td").text().toUpperCase();
      $("#textout").append(text + "!!");
    }
  });

  //styling cols
  $('td:first-child').each(function() {
    for (var i = 0; i <= 5; i++) {
      var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
      if (col == 5) {
        $(".bingocl").fadeIn(2000);
        var column = $('.tabell tr').find('td:nth-child(' + i + ')');
        column.addClass("bingo", 2000);
        var text = column.text().toUpperCase();
        $("#textout").append(text + "!!");
        break;
      }
    }
  });
}
$(document).ready(main);

Answer 1

您可以column.html();获取单元格内容

Answer 2

您可以随时尝试使用break。链接：MDN

Answer 3

尝试使用break：

$('td:first-child').each(function() {
for (var i = 0; i <= 5; i++) {
    var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;  
    if (col == 5) {
        $(".bingocl").fadeIn(2000);
        var column = $('.tabell tr').find('td:nth-child(' + i + ')');
        column.addClass("bingo", 2000);  
        var text = column.text().toUpperCase(); 
        $("#textout").append(text + "!!");   
        break;      
    }
}
});

Answer 4

如果您已经可以访问获胜的行/列（向其添加bingo类），则可以访问每个元素以输出它的值。

您的代码变为：

var main = function() {

  //Styling the rows 
  $(".tabell tbody").find("tr").each(function(idx) {
    var row = $(this);
    if (row.find("td").length == row.find("td.check").length) {
      row.addClass("bingo");
      $(".bingocl").fadeIn(2000);

      // Iterate your row elements
      row.each(function(){document.write($(this).html() + " ");});
    }
  });

  //styling cols
  //$('td:first-child').each(function() { <- remove this
    for (var i = 0; i <= 5; i++) {
      var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
      if (col == 5) {
        $(".bingocl").fadeIn(2000);
        var column = $('.tabell tr').find('td:nth-child(' + i + ')');
        column.addClass("bingo", 2000);

        // Iterate your column elements
        column.each(function(){document.write($(this).html() + " ");});

        break;
      }
    }
  //}); <- remove this
}
$(document).ready(main);

实例

＆＃13;

var column = $(".selected_column");
var row = $(".selected_row");

column.addClass("bingo");
row.addClass("bingo");

column.each(function() {
  $("#textout").append($(this).html() + " ");
});

row.each(function() {
  $("#textout").append($(this).html() + " ");
});

＆＃13;

.selected_column {
  background: blue;
}
.selected_row {
  background: yellow;
}
.selected_column.selected_row {
  background: green;
}
.bingo {
  border: 2px solid lime;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>A</td>
    <td class="selected_column">B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
    <td class="selected_column">G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
  <tr>
    <td>K</td>
    <td class="selected_column">L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
  </tr>
  <tr>
    <td class="selected_row">P</td>
    <td class="selected_column selected_row">Q</td>
    <td class="selected_row">R</td>
    <td class="selected_row">S</td>
    <td class="selected_row">T</td>
  </tr>
  <tr>
    <td>U</td>
    <td class="selected_column">V</td>
    <td>W</td>
    <td>X</td>
    <td>Y</td>
  </tr>
</table>
<p id="textout">#textout : </p>

＆＃13;

可能只在for循环中运行一次代码块？

4 个答案: