Question

我有当前的代码：

<div class="submenu" id="submenu0">
    <ul class="root" id="root0">
        <li class="line_element line0"><a><img src="images/lifevl13.jpg" style="padding-left: 5px; width:20px; height:20px;" />Video</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl12.jpg" style="padding-left: 5px; width:20px; height:20px;" />Ebook</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl3.jpg" style="padding-left: 5px; width:20px; height:20px;" />Music/Audio</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl2.jpg" style="padding-left: 5px; width:20px; height:20px;" />Email</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl4.jpg" style="padding-left: 5px; width:20px; height:20px;" />Mail</a></li>
    </ul>
</div>

我动态克隆上面的内容并将其放在页面的另一部分中，该部分也是动态创建的。我想要的是line0部分在添加新元素时更改为line1，line2等，这样我就可以跟踪它们。

我的添加按钮事件处理程序通常执行此操作，但由于某种原因，我似乎无法让它在每个单独的'li'元素上工作。我会发布我的jquery，但它是一大堆代码，所以除非你提出要求，否则我不会在这里提供它。

编辑:(好的，这是jquery的部分）

    var numOfParts = ($('.gig_parts').length);
    $('.root.line_element:last').attr('id', 'line_element'+numOfParts);

'numOfParts'变量跟踪动态创建的'fieldsets'并将其固定到我的id的末尾，我知道这不是一个好方法，但相信我，我也是现在还有很大的改变，也许是在以后的重新设计中。我对这一切仍然很陌生。

Answer 1

我对类似情况的处理历来是避免clone并且每次都从头开始创建元素，或者（1）使用jQuery，或者（2）使用文档片段。这样，您可以轻松控制id和class。

正如the jQuery documentation中所述：

注意：使用.clone（）具有生成元素的副作用重复的id属性，应该是唯一的。哪里可能，建议避免使用此方法克隆元素或者使用类属性作为标识符。

那就是说，您可以查看this post进一步的评论。 This和this也可能会引起关注。

进一步的想法：

关于增量class和id号码，关键问题是他们所服务的目的。如果你可以避免给每个元素一个唯一的id并以另一种方式有效地处理它，那么这是更可取的。每个class都可以这样说。 Javascript和jQuery允许您处理this元素，因此可能根本不需要唯一标识符。

就我而言，我通过AJAX从数据库构建了数千个元素，每个元素都有一个与其数据库索引相对应的唯一id。这对于维护HTML元素和MySQL记录之间的链接是必要的，但在您的情况下可能不是这种情况。这肯定与每次构建索引都不一样。

总之，您需要确定唯一的class和id标识符为您实现的目标：）

Answer 2

我知道你有答案，但是我提供这个替代方案，以防有人不想使用重复/插入ID等，只想用他们的例子克隆他们拥有的东西。我使用.data()来存储当前行id /索引号 - 不是特别需要的，因为你也可以找到它的当前索引 - 只是为了表明它是如何真实的。

为了演示，我稍微修改了你的标记：

<div class="submenu" id="submenu0">
  <ul class="root" id="root0">
    <li class="line_element"><a><img src="images/lifevl13.jpg" />Video</a></li>
    <li class="line_element"><a><img src="images/lifevl12.jpg" />Ebook</a></li>
    <li class="line_element"><a><img src="images/lifevl3.jpg" />Music/Audio</a></li>
    <li class="line_element"><a><img src="images/lifevl2.jpg" />Email</a></li>
    <li class="line_element"><a><img src="images/lifevl4.jpg" />Mail</a></li>
  </ul>
</div>
<div id="rowCount"></div>
<button id="rowAdd">Add New Row</button>

然后使用这个非常详细的代码，我展示了如何克隆最后一行并更新它。您可以重构此代码以使其更密集/更简洁，但我专门为此展示了每一步。

//just show current row count
var numOfParts = $('#root0>.line_element').length + " rows";
$('#rowCount').text(numOfParts);
// show current rows numbers in a span and give
// them a "myid" data value with that value
//this is very verbose to show detail
$('#root0>.line_element').each(function () {
  var row = $(this);
  row.data('myid', row.index());
  row.append('<span class="rownumber">' + row.data("myid") + '</span>');
});

// add a new row
$('#rowAdd').click(function () {
  // add a row
  $('#root0>.line_element:last').clone().appendTo('#root0');

  // update the row count display
  var numOfParts = $('#root0>.line_element').length;
  $('#rowCount').text(numOfParts + " rows");

  // update the added row myid
  var rowAdded = $('#root0>.line_element:last');
  rowAdded.data('myid', rowAdded.index());

  // show what we are doing
  // then update the current added row displayed number using its data myid
  alert('updating: ' + $('#root0>.line_element:last>.rownumber').text() + " to " + rowAdded.data("myid"));
  $('#root0>.line_element:last>.rownumber').text(rowAdded.data("myid"));
});

以下是一个工作示例：http://jsfiddle.net/RCTYZ/

使用jquery中的元素

2 个答案: