具有来自数组的值的7行

Question

我想创建一个从数组["1", "2", "3"]中获取值的代码，然后创建一个包含7个值的新行。该数组将有接近90个值，因此1-7在第一行，8-14在另一行，依此类推。我创建了这段代码，但它只是冻结了网站和崩溃的浏览器，所以我希望你告诉我哪里错了。

var newVals = new Array("1", "2", "3"..."81");
var target = ".content table";
var activeTar = target + " .active";
for(var i = 0; i < newVals.length; i++){
    for (var y = 0; y < 7; y++){
        if(y == 0){
            jQuery(target).append('<tr class="active"></tr>');
        }
        var valId = newVals[i];
        var valImg = "http://sub.domain.com/" + valId + "/picture";
        var valCode = '<td class="cell"><a class="toggleAdd" tabindex="0" data-icon="'+valId+'"><img src="'+valImg+'"></a></td>';
        jQuery(activeTar).append(valCode);
        if(y == 6){
            jQuery(activeTar).removeClass("active");
            y = -1;
        }
    }
}
jQuery(".toggleAdd").live("click", function(){
    jQuery("input", jQuery(this).closest('form')).val(jQuery("input", jQuery(this).closest('form')).val() + jQuery(this).attr("data-icon"));
});

Answer 1

看起来您的"active"类只是为了执行DOM selecto插入到适当的行中。

不必了。只需将行保存在变量中，添加到变量中，然后每七个项目创建并保存一行。

var newVals = new Array("1", "2", "3", /*...,*/ "81"),
    target = jQuery(".content table"),
    activeRow;

$.each(newVals, function(i, valId) {
    if(i % 7 === 0)
        activeRow = jQuery('<tr></tr>').appendTo(target);

    activeRow.append('<td class="cell"><a class="toggleAdd" tabindex="0" data-icon="'+valId+'"><img src="http://sub.domain.com/' + valId + '/picture"></a></td>');
});

它使用模运算符来确定是否是创建新行的时候。

关于处理程序，如果你使用变量，你可以把它清理一下。此外，如果您使用的是jQuery 1.7或更高版本，则应该使用on而不是live。

jQuery(document).on("click", ".toggleAdd", function(){
    var input = jQuery(this).closest('form').find("input"),
        v = input.val() + jQuery(this).attr("data-icon");

    input.val(v);
});

您应该用表示包含所有.toggleAdd元素的最深容器的选择器替换document。

Answer 2

如果我理解正确的话，您只需删除以下行：

y = -1;

并更改以下for循环：

for(var i = 0; i < newVals.length; i++){

对于这一条：

for(var i = 0; i < newVals.length; i = i + 7){

并替换您的以下行：

var valId = newVals[i];

对于这一条：

var valId = newVals[i + y];