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

Question

我试图将 1 添加到任何新附加的 id/class：

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 而不是追加并查找 div.student-information：最后
http://jsfiddle.net/KHfyY/1/ 使用此处的代码并附加两者中的

任意一个最适合这个的应该是我们可以使用的。

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