Последние кнопки подряд отсутствуют

Question

У меня есть цикл jquery, где он отображает кнопки A - Z, но он отображает 7 кнопок подряд. Так должно выглядеть вот так:

    A B C D E F G
    H I J K L M N
    O P Q R S T U
    V W X Y Z

Но проблема в том, что этот цикл приводит к отсутствию последних кнопок в каждой строке. Так что кнопки G, N и U отсутствуют. Я хочу знать, почему они отсутствуют, и как я могу исправить приведенный ниже код, чтобы показать эти кнопки, а также остальные кнопки.

    var i = 1;

    $('#optionAndAnswer .answers').each(function() {
        var $this = $(this);
        var $newBtn = '';
        if($this.is(':visible')){
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }else{
            $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class'));
        }

                    if(i % 7 == 0){
              $answer.append($newBtn+"<tr></tr>");
            }
            else
             $answer.append($newBtn);                 
            i = i+1;
        });




PHP CODE:


<?php
    $a = range("A","Z");
?>

    <table>
        <tr>

    <?php
        $i = 1;
        foreach($a as $key => $val){
            if($i%7 == 1) echo"<tr><td>";
            echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\" style=\"display: inline;\">";       
            if($i%7 == 0) echo"</td></tr>";
            $i++;
        }
    ?>
        </tr>
    </table>

Answer 1

[игнорировать]

$newBtn+"<tr></tr>" Это экземпляр jQuery + String.Я думаю, что в этом проблема.Попробуйте сохранить newBtn в виде строки до окончательного $answer.append($(newBtn));.

[/ ignore]

Я только что попытался создать одну строку, и она оказалась громоздкой.

Следующее решение ближе к вашему первоначальному замыслу, но позволяет избежать ловушки при попытке добавить недопустимый фрагмент HTML "</tr><tr>":

var $this, i=0, $row, $cell;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);
    if(i%7 == 0) {
        $row = $('<tr />').appendTo($answer);
        $cell = $('<td />').appendTo($row);
    }
    $("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' />".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).appendTo($cell);
    i++;
});

Tested only for synatax errors