循环的JQuery卡在最后一个索引处

JQuery for loop stuck at last index

本文关键字：最后一个 索引 JQuery 循环      更新时间：2023-09-26

我有一个函数process_row，它将标记附加到html中，并且这些标记在单击时链接到一个函数。（在这种情况下，只需提醒（i），它在结果数组中的位置）。

但是，单击后，新生成的警报会显示整个结果数组的长度。我尝试了很多改变，试图让它发挥作用，但没有。

奇怪的你，fab_div.attr("id", result_data[0])；效果很好！！在chromeinspect元素中，id标记会按原样显示，但click函数会将所有内容都指向数组中的最后一个元素。

例如，如果我这样做，fab_div.click(function () { alert(result_data[0]) });，我会得到数组中LAST元素的名称，而不管单击了哪个元素。

谁能向我解释一下…为什么？？

我认为这可能与$("<div>")有关，JQuery认为它是分配给它的同一个div。有办法解决这个问题吗？的是动态生成的，我不想让PHP做回显。此外，内容可以实时更新。

示例数据集：

Smith_Jones#Smith#Jones@janet_Moore#Janet#Moore@Andrew_Wilson#Andrew#Wilson

经过很多很多改变，仍然不起作用：

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        
        result_data =result_array[0].split("#");        
        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>");
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            fab_div.append(fab_text)
            // fab_div.click(function () { alert(i) }); 
            // ^ not working, try appending list of id's to id_list
            id_list.push(result_data[0])
            $('#ls_admin').append(fab_div)      
        }           
        for(j = 0; j < id_list.length; j++){
            $('#' + id_list[j]).click(function () { alert(j) })
        }               
    }
}

原始尝试：

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        
        result_data =result_array[0].split("#");        
        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>").append(fab_text).click(function () { alert(i) });  
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            $('#ls_admin').append(fab_div)
        }       
    }
}

如果您必须使用警报，那么您可以将点击处理程序封装在一个自执行函数中，并将索引传递给它

(function (index) {
     fab_div.click(function () {
         alert(index);
     });
})(i);

不过，这并不是一个干净的方法。否则，如果你只想以任何方式操作div元素，那么直接添加任何方法也可以。比如

fab_div.click(function () {
        alert($(this).attr('id'));
});

您可以在此处引用jsFiddle

奇妙的解决方案，但它成功了！哈哈！非常感谢Kevin B.

function process_row(data){    
    result_array = data.split("@"); 
    if(result_array.length > 0){        
        result_data =result_array[0].split("#");
        for(i = 0; i < result_array.length; i++){
            result_data =result_array[i].split("#");
            var fab_text = result_data[1] + " " + result_data[2]
            var fab_div = $("<div>").append(fab_text);
            fab_div.addClass('scroll_tap'); 
            fab_div.attr("id", result_data[0]); 
            $('#ls_admin').append(fab_div)
        }       
        $("#ls_admin").children(this).each(function( index ) {
            $(this).append($(this).click(function () { alert($(this).text()) }));
        }); 
    }
}
相关文章：