Question

I have a jquery loop where it displays buttons A – Z but what it does is display 7 buttons in a row. So it should look like this below:

    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

But the problem is that this loop is causing the last buttons in each row to be missing. So buttons G, N and U are missing. I want to know why are they missing and how can I fix the code below to show these buttons as well as the rest of the buttons.

    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

[ignore]

$newBtn+"<tr></tr>"
That’s a jQuery instance + String.
I think that’s where the problem lies.
Try keeping newBtn as a string all through until a final $answer.append($(newBtn));.

[/ignore]

I just tried building a single string and it turns out to be cumbersome.

The following solution is closer to your original intent, but avoids the trap of trying to append the invalid HTML fragment "</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