Estoy usando el bucle para encontrar columnas de tablas completas que contienen celdas con una clase determinada y funciona bien para aplicar la clase y las otras cosas a continuación. El único problema es que también me gustaría generar el valor de las celdas una vez. ¿Es esto posible de alguna manera?

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

Actualizar:

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

Funcionar en su totalidad:

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);
-1
oceansmoving 10 may. 2016 a las 11:44

4 respuestas

La mejor respuesta

Siempre que ya tenga acceso a su fila / columna ganadora (les agrega una clase bingo), puede acceder a cada elemento individual para generar su valor.

Tu código se convierte en:

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

Ejemplo en vivo

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>
0
PinkTurtle 10 may. 2016 a las 12:42

Intenta usar 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;      
    }
}
});
0
Vatsal Pathak 10 may. 2016 a las 08:52

Puede hacer column.html(); para obtener el contenido de la celda

0
brk 10 may. 2016 a las 08:49

Siempre puedes intentar con break. Enlace: MDN

0
praetoriaen 10 may. 2016 a las 08:49