Как мне сделать новый div с определенным Id + n?

Question

У меня есть кнопка, и когда она нажата, этот код запускается:

var nrDivs = "1"
var neuDiv = document.createElement ("div");
neuDiv.setAttribute ("Id", "theDiv" + nrDivs);
neuDiv.innerHTML = "Text";
$ ('# allDivs'). append (neuDiv);

новый каналdraw (neuDiv);

Я знаю, что сейчас скрипт создает новый div с идентификатором: theDiv1.То, что я пытаюсь сделать, это когда я нажимаю кнопку во второй раз, он создает div с идентификатором: theDiv2.

Каждый раз, когда пользователь нажимает кнопку, должен быть нарисован новый div, и я 'Я пытаюсь нацелиться на этот новый div и вставить динамический текст.

Спасибо, Нур

Answer 1

Здесь вы можете использовать больше jQuery, но я оставил его почти таким же, как и у вас, добавив только того, что вам нужно.

Обратите внимание, что это будет учитывать ВСЕ div элементов в #allDivs. Если есть такие, которые вы не хотите считать, следует использовать другой подход.

$(document.ready(function() {

    $('#myButton').click(function() {     // On page load, assign click event handler to your button

        var nrDivs = $('div', '#allDivs').length + 1;    // Retrieve all 'div' elements within '#allDivs', and get its length plus 1
        var neuDiv = document.createElement("div");
        neuDiv.setAttribute("Id","theDiv" + nrDivs);
        neuDiv.innerHTML = "Text";
        $('#allDivs').append(neuDiv);
        newfeed.draw(neuDiv);

    });

});

---

EDIT:

Более jQuery-подобный способ:

$(document.ready(function() {

    $('#myButton').click(function() {     // On page load, assign click event handler to your button

        var nrDivs = $('div', '#allDivs').length + 1;    // Retrieve all 'div' elements within '#allDivs', and get its length plus 1
        var $neuDiv = $('<div>').attr('id','theDiv' + nrDivs)
                                .text("Text")
                                .appendTo('#allDivs');
        newfeed.draw(neuDiv);

    });

});

---

EDIT:

Селекторы в jQuery очень мощные и обладают большой гибкостью.

Например, строка выше, которая получает все элементы div в #allDivs, может быть переписана как:

$('#allDivs div').length + 1;

... что точно так же.

Если вы хотите получить только элементы div, которые являются непосредственными потомками #allDivs, используйте:

$('#allDivs > div').length + 1;

или

$('#allDivs').children('div').length + 1;

Другой альтернативой может быть предоставление этим div элементам специального класса, который вы можете использовать в качестве селектора. Так, например, когда вы создаете новый div для добавления к #allDivs, сделайте это следующим образом:

var $neuDiv = $('<div>').attr('id','theDiv' + nrDivs)
                                .addClass('topDiv')
                                .text("Text")
                                .appendTo('#allDivs');

Теперь верхние div элементы в #allDivs будут иметь класс с именем `topDiv ', и вы можете ссылаться на него в своем селекторе следующим образом:

$('#allDivs .topDiv').length + 1;

... который будет возвращать только div элементов, которые имеют класс topDiv.

Это только царапает поверхность того, что вы можете делать с селекторами в jQuery.

Надеюсь, это поможет.

Answer 2

Во-первых, вы можете сделать nDivs глобальной переменной и увеличивать ее каждый раз, когда создаете div.

Вы также можете использовать селектор jquery, чтобы получить все div, а затем использовать длину, чтобы получить счетчик, к которому вы можете добавить один для вашего нового div.

Answer 3

Либо назовите nDivs глобальной переменной (плохо использовать глобальные переменные в целом, но она работает), и увеличивайте ее при каждом запуске этого кода.

Или еще лучше, сделайте этот код замыканием , способным обращаться к nDivs

Answer 4

Чтобы добавить новый идентификатор в div, сделайте это.

По умолчанию это var nrDivs = "1" По клику сделай: n ++;