Динамически добавьте 1 к идентификатору / классу в добавленном div с помощью jQuery - PullRequest
Новая
       40

Динамически добавьте 1 к идентификатору / классу в добавленном div с помощью jQuery

0 голосов
/ 12 июля 2011

Я пытаюсь добавить 1 к любому вновь добавленному идентификатору / классу:

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: lasthttp://jsfiddle.net/KHfyY/1/ использует здесь код с добавлением для обоих

Какой из них лучше для этого, тот должен использоваться.

Если учеников нет, то первый класс/ ID должен быть студент1.Если есть учащиеся, как в коде, он должен увеличить его на 1, основываясь на последнем номере учащегося.Есть идеи, как это можно сделать?

Ответы [ 2 ]

1 голос
/ 12 июля 2011

Попробуйте это: 

$(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/

0 голосов
/ 12 июля 2011

Обновлено

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

Как это?

Просто установите переменную n заранее, исходя из того, сколько учеников у вас в начале.

В этом примере n вычисляется автоматически путем подсчета ученика, уже присутствующего в списке.

...