jquery - 如何创建一个具有特定 Id + n 的新 div？

Question

我有一个按钮，当按下它时，此代码将启动:

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

newfeed.draw(neuDiv);

我知道现在脚本创建了一个 ID 为 theDiv1 的新 div。 我想做的是，当我第二次单击该按钮时，它会创建一个 ID 为 theDiv2 的 div。

每次用户按下按钮时，都应该绘制一个新的 div，我正在尝试定位该新的 div 并插入动态文本。

谢谢，努尔

Answer 1

您可以在此处使用更多 jQuery，但我将其与您的几乎相同，仅添加足够的内容来完成您想要的操作。

请注意，这将计算 #allDivs 中的所有 div 元素。如果有一些您不想计算，则必须采取另一种方法。

$(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);

    });

});

<小时/>

编辑:

一种更像 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);

    });

});

<小时/>

编辑:

jQuery 中的选择器非常强大并且提供了很大的灵 active 。

例如，上面获取 #allDivs 下所有 div 元素的行可以重写为:

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

...完全一样。

如果您只想获取 #allDivs 的直接子元素 div 元素，请使用:

$('#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');

现在，#allDivs 中的顶部 div 元素将有一个名为“topDiv”的类，您可以在选择器中引用该类，如下所示:

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

...它只会返回具有 topDiv 类的 div 元素。

这只是 jQuery 选择器功能的冰山一角。

希望这有帮助。