動態添加1〜ID /類上附加的div使用jQuery

Question

我想1添加到任何新追加的ID /類：

的jQuery：

$(function(){ 
$("#add-new-student").click(function() { 

$("ul#student-list").append('<li class="student3"/>Student</li>'); 
$("div#student-courses").append('<div id="student3" class="student-information">' 
+ '<div id="student3-enrolled-courses">' 
+ '<span class="english">English</span>' 
+ '<span class="technology">Technology</span>' 
+ '</div>' 
+ '</div>' 
); 

}); 
}); 

HTML：

<input type="submit" id="add-new-student" value="Add New Student"> 

<ul id="student-list"> 
<li class="student1"/>Student</li> 
<li class="student2"/>Student</li> 
</ul> 

<div id="student-courses"> 
<div id="student1" class="student-information"> 
<div id="student1-enrolled-courses"> 
<span class="english">English</span> 
<span class="technology">Technology</span> 
</div> 
</div> 

<div id="student2" class="student-information"> 
<div id="student2-enrolled-courses"> 
<span class="english">English</span> 
<span class="technology">Technology</span> 
</div> 
</div> 
</div> 

我設置了兩個小提琴：
http://jsfiddle.net/KHfyY/用後代替追加並找到div.student-information：最後
http://jsfiddle.net/KHfyY/1/在此處使用代碼並追加

無論哪一個最適合此應該是我們可以使用的。

如果沒有學生，那麼第一個class/id應該是student1。如果代碼中有學生，則應根據最後一個學號將其加1。任何想法如何做到這一點？

Answer 1

試試這個：

$(function(){ 
    $("#add-new-student").click(function() { 
     var studentList = $("ul#student-list"); 
     var currentCount = $("li", studentList).length + 1; 
    studentList.append('<li class="student' + currentCount +'">Student</li>'); 
    $("div#student-courses").append('<div id="student' + currentCount +'" class="student-information">' 
    + '<div id="student' + currentCount +'-enrolled-courses">' 
    + '<span class="english">English</span>' 
    + '<span class="technology">Technology</span>' 
    + '</div>' 
    + '</div>' 
    ); 
    }); 
}); 

工作例如@：http://jsfiddle.net/KHfyY/5/

Answer 2

更新

http://jsfiddle.net/KHfyY/7/

喜歡這個？

只需根據您在開始時有多少學生，提前設置變量n。

在這個例子中，n是通過計算已經存在於列表中的學生自動計算的。