javascript - 如何将复选框附加到主 div 的子 div

Question

我想为每个孩子附加一个复选框。为此我使用

var len = $("#personalDetails").children("div").length;
    for(var id=0; id<len;id++)
    {
       var el = $('<input type="checkbox"/>');
        $("#personalDetails").children(":first").attr("id",id);
        alert(id);
        $( "#"+id).append(el);       
    } 

html

<div id="personalDetails">
    <div>personal</div>
    <div>Education</div>
</div>

通过这样做，我遇到了问题。所有复选框都在一个 div 下。如何为一个 div 设置一个，为另一个 div 设置另一个？[注意：我们不能为儿童 div 放置任何 id 或类] http://jsfiddle.net/QTzrB/

Answer 1

你可以

$(document).ready(function(){
    $('#personalDetails > div').each(function(idx, el){
        $('<input type="checkbox"/>').attr("id", idx).appendTo(el);
    })
    $('#personalDetails').on('click', 'input[type="checkbox"]', function(){
        alert(this.id);
    });
});

演示：小提琴

Answer 2

尝试这个

$(document).ready(function(){
    var len = $("#personalDetails").children("div").length;
    $("#personalDetails div").each(function(idx) {
    $(this).append("<input type='checkbox' id="+ idx +" />");
});

$("input[type=checkbox]" ).on("click",function(){
       alert($(this).attr("id"));
 });
});

小提琴演示

Answer 3

$(document).ready(function(){       
  $("#personalDetails").children("div").each(function(index, obj) {
     var $chk = $("<input/>",{"type":"checkbox"});
     $(this).prepend($chk.attr("id",index));                
     $chk.on("click",function(){
        alert(this.id);
     });
   });
});

在这里工作演示：http: //jsfiddle.net/HNezs/

Answer 4

用这个替换你的脚本，希望这会做你想要的。

$(document).ready(function(){
    $('#personalDetails').children('div').each(function(){
     $(this).append('<input type="checkbox"/>');
    });
});

小提琴

Answer 5

您应该缓存 div 列表。此外，如果您不想将 id 放入输入元素，那么您也可以缓存它们。

下面的代码正在处理Fiddle。

$(document).ready(function(){
    var divs = $("#personalDetails").children("div");
    var len = divs.length;

    for(var id = 0; id < len; id++) {
       var el = $('<input type="checkbox"/>');
       divs.eq(id).append(el);       
    }
});