0

我有当前的代码：

<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 的末尾，我知道这不是这样做的好方法，但相信我，我改变得太远了现在，也许在以后的重新设计中。我对这一切还是很陌生。

4

2 回答 2

1

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

正如它在jQuery 文档中所说：

注意：使用 .clone() 具有产生具有重复 id 属性的元素的副作用，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

也就是说，您可能想查看这篇文章以获取更多评论。这和这也可能是有趣的。

进一步的想法：

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

在我的例子中，我通过 AJAX 从数据库中构建了数千个元素，每个元素都有一个id对应于其数据库索引的唯一元素。这对于维护 HTML 元素和 MySQL 记录之间的链接是必要的，但在您的情况下可能并非如此。这肯定与每次都从 1 构建索引不同。

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

于 2013-01-09T12:28:21.240 回答
0

我知道你有你的答案，但我提供了这个替代方案，以防有人不想使用重复/插入的 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/

于 2013-01-09T13:18:16.103 回答