可能只運行代碼塊for循環一次？

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

只要你已經可以訪問您的中獎行/列（你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>

Answer 2

你可以做column.html();讓單元格內容

Answer 3

你總是可以用break嘗試。 鏈接：MDN

Answer 4

嘗試使用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;  
    } 
} 
});