使用 jQuery 在附加的 div 上动态地将 1 添加到 id/class

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/ 使用 after 而不是 append 并找到 div.student-information:last
http://jsfiddle.net/KHfyY/1/ 使用此处的代码和 append 用于两者

哪一个最适合我们应该是我们可以使用的那个。

如果没有学生，那么第一个班级/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 是通过计算列表中已经存在的学生来自动计算的。