在 jquery 中处理元素

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”变量跟踪动态创建的“字段集”并将其添加到我的 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 记录之间的链接所必需的，但在您的情况下可能并非如此。这肯定和每次都从 1 开始构建索引不一样。

总之，您需要确定唯一的 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/