可能只在for循环内部运行一次代码块

Possible to only run code block inside for loop once?

本文关键字：一次 代码 运行 for 内部 循环      更新时间：2023-09-26

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

$('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);

如果您已经有权访问获胜的行/列（向其中添加一个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);

实时示例

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() + " ");
});
.selected_column {
  background: blue;
}
.selected_row {
  background: yellow;
}
.selected_column.selected_row {
  background: green;
}
.bingo {
  border: 2px solid lime;
}
<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>

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

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

尝试使用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;      
    }
}
});
相关文章：