如何创建具有特定 Id + n 的新 div？答案

【问题标题】：How do I make a new div with a specific Id + n?如何创建具有特定 Id + n 的新 div？
【发布时间】：2011-02-14 15:11:53
【问题描述】：

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

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

newfeed.draw(neuDiv);

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

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

谢谢，努尔

【问题讨论】：

您的 div 需要 ID 吗？通常有一种相对的方法可以找到它们，如果可以的话，这不是问题。
我让每个 div 加载新内容，为此我需要它们具有不同的 ID。

标签： jquery dynamic loops

【解决方案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 中的选择器非常强大并且提供了很大的灵活性。

例如，上面获取#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 中使用选择器所做的事情的皮毛。

希望这会有所帮助。

【讨论】：

在 1.4 中有更快的方法 :) $('<div />', { 'id':'theDiv' + nrDivs, text:"Text" }).appendTo('#allDivs')
@尼克。很不错。我见过它，但忘记使用它。感谢您的来信。
谢谢大家，我还在学习，你们是很棒的老师。这就是我所需要的+更多，这是一件好事:)！
@patrick & nick 是否可以不将每个 Div 的子项包含在 allDivs 中？原因是当我调用该函数时，它会创建 theDiv(s) 并将 div 放置在其中..
您可能想要使用 .html("Text") 而不是 .text("Text")。

【解决方案2】：

首先，您可以将 nDivs 设为全局变量，并在每次创建 div 时递增。

您还可以使用 jquery 选择器获取所有 div，然后使用 length 来获取计数，您可以为新 div 添加一个。

【讨论】：

【解决方案3】：

要向 div 添加新 ID，请执行此操作。

默认为 var nrDivs = "1" 点击后执行：n++;

【讨论】：

【解决方案4】：

将 nDiv 命名为全局变量（一般来说使用全局变量不好，但它可以工作），并在每次运行此代码时递增它。

或者更好的是，将此代码设为closure，能够访问 nDivs

【讨论】：