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);
    });
});

演示：Fiddle

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"));
 });
});

Fiddle Demo

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"/>');
    });
});

fiddle

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);       
    }
});

如何使用主div的子div附加复选框

5 个答案: