如何將複選框添加到主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？ [注：我們不能把對兒童進行任何id或class的div] 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);  
    } 
});