コードブロックを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

あなたは常にbreakと試みることができるセルの内容

Answer 3

を取得するためにcolumn.html();を行うことができます。 リンク：MDN

Answer 4

がブレークを使用してみてください：

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