Javascript 替换每个元素及其内容上的索引

我需要用一个累进的数字替换一个文本，该文本在几个元素中多次重复出现，并且具有相同的id，包括its标记和内部html。例如：

<div id="element_x_">
 <p>Line number _x_</p>
</div>
<div id="element_x_">
 <p>Line number _x_</p>
</div>

---

但是这根本不起作用，我想.contents函数不是我所需要的，我不确定如何为替换选择每个迭代的整个元素（标记+内容）。

请注意，您从一个无效文档开始，因为

id

值必须是唯一的。因此，您无法保证浏览器在解析后会保留无效的

id

。实际上，我从来没有遇到过一个没有，但我仍然会删除那些重复的

id

s，并为相关元素提供一个共享的

class

如果你那样做，那么

$(".the-class").each(function(i) {
    this.id = "element" +i;
    this.innerHTML = this.innerHTML.replace(/_x_/g, i);
});

$（“.the class”）。每个（函数（i）{
this.id=“element”+i；
this.innerHTML=this.innerHTML.replace（/\ux\ug/g，i）；
});

行号_

行号_

您需要用替换的内容替换当前元素。但请注意，这并不是一个好的设计，因为元素的ID必须是唯一的，并且任何附加到这些元素的事件处理程序/数据都会因为替换而丢失


$（'div[id=“element_x_ux”]”）。每个（函数（i）{
$（this.replacetwith（this.outerHTML.replace（/x_ug/g，i+1））；
});

行号_

行号_

您不应该循环使用和
ID
，因为它应该是唯一的。您需要添加
类
，或按类型选择元素（
div
）


$（'.elt_x'）。每个（函数（i）{
var thisElt=$（本）；
var thisChild=thisElt.children（“p”）；
thisElt.attr（“id”，thisElt.attr（“id”）.replace（“\ux”，i+1））.removeClass（“elt\ux”）；
thisChild.text（thisChild.text（）.replace（“x_u”，i+1））；
});

行号_

行号_

从id到类id的更改必须是唯一的，您可以按类进行更改

    <div class="element_x_">
     <p>Line number _x_</p>
    </div>
    <div class="element_x_">
     <p>Line number _x_</p>
    </div>
    <script type="text/javascript">
    $('.element_x_').each(function(i) {
     $(this).html($(this).html().replace(/_x_/g, i+1));
    });
    </script>


行号_

行号_

$（'.element_x'）。每个（函数（i）{
$（this.html（$（this.html（）.replace（/x_ug/g，i+1））；
});
另一方面，处理属性id和
p
文本：

$('[id=element_x_]').attr('id', function(index) {
  var i = ++index;
  $(this).children('p').text(function(_, txt){
      return txt.replace('_x_', i)
  })
  return "element" + i;
});

这就是说，不得不在客户端这样做似乎真的是错误的。在呈现HTML标记之前，应该在服务器端处理此问题。
但是如何呈现此无效HTML标记？？？在呈现之前你不能更改它吗？标记最初是无效的：标识符必须是唯一的。它是来自Zend Framework 2的字段集的动态集合，我在呈现表单时使用类似的方法创建元素（ZF2提供了一个要复制的模板，包含这样的索引，我用JS替换它们），但是如果我提交了表单，它是无效的，我会得到相同数量的返回字段，但是没有替换索引，因为它们不是由我的JS创建的，而是由框架本身创建的。
    <div class="element_x_">
     <p>Line number _x_</p>
    </div>
    <div class="element_x_">
     <p>Line number _x_</p>
    </div>
    <script type="text/javascript">
    $('.element_x_').each(function(i) {
     $(this).html($(this).html().replace(/_x_/g, i+1));
    });
    </script>

$('[id=element_x_]').attr('id', function(index) {
  var i = ++index;
  $(this).children('p').text(function(_, txt){
      return txt.replace('_x_', i)
  })
  return "element" + i;
});