Question

我需要在具有相同ID的多个元素中替换多次重复的文本，包括其标记和内部html，以及渐进编号。例如：

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

应该成为：

<div id="element1">
 <p>Line number 1</p>
</div>
<div id="element2">
 <p>Line number 2</p>
</div>

到目前为止我尝试的是：

$('#element_x_').each(function(i) {
 $(this).contents($(this).contents.replace(/_x_/g, i));
});

但是这只是不起作用，我猜.contents函数不是我需要的，我不知道如何选择每个迭代的整个元素（标记+内容）来替换它来完成它的工作。

Answer 1

请注意，您开始使用无效文档，因为id值必须是唯一的。因此，您无法保证浏览器在解析后将保留无效的id。在实践中，我从来没有遇到过那些没有的，但我仍然删除了那些重复的id，并将相关元素改为共享class。

如果你这样做，那么

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

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

<div class="the-class">
  <p>Line number _x_</p>
</div>
<div class="the-class">
  <p>Line number _x_</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如果不这样做，可以使用属性选择器：

$("[id=element_x_]").each(function(i) {
    this.id = "element" +i;
    this.innerHTML = this.innerHTML.replace(/_x_/g, i);
});

$("[id=element_x_]").each(function(i) {
  this.id = "element" + i;
  this.innerHTML = this.innerHTML.replace(/_x_/g, i);
});

<div id="element_x_">
  <p>Line number _x_</p>
</div>
<div id="element_x_">
  <p>Line number _x_</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

适用于当前的jQuery和主流浏览器。但我不会。

请注意，在这两种情况下，我们假设您希望将这些元素中的所有 _x_替换为相同的i值。

关于this.innerHTML = this.innerHTML.replace(/_x_/g, i);的注释：虽然快速而简单，但它也会拆除你所执行元素内的所有元素，丢弃它们上的任何事件处理程序，然后让浏览器通过以下方式重新创建它们：解析新的HTML。它还会查找_x_ 无处不在，而不只是在文本中。当然，这可能就是你想要的。

完成this.id = ...更新id后，如果只想要处理文本而不是拆除重新创建的元素，那么jQuery实际上可以通过它{ {1}}函数，但我们需要递归：

contents

$(".the-class").each(function(i) {
  this.id = "element" + i;
  updateElement(this, /_x_/g, i);
});
function updateElement(element, rex, rep) {
  $(element).contents().each(function() {
    switch (this.nodeType) {
        case 1: // Element
            updateElement(this, rex, rep);
            break;
        case 3: // Text node
            this.nodeValue = this.nodeValue.replace(rex, rep);
            break;
    }
  });
}

$(".the-class").each(function(i) {
  this.id = "element" + i;
  updateElement(this, /_x_/g, i);
});
function updateElement(element, rex, rep) {
  $(element).contents().each(function() {
    switch (this.nodeType) {
        case 1: // Element
            updateElement(this, rex, rep);
            break;
        case 3: // Text node
            this.nodeValue = this.nodeValue.replace(rex, rep);
            break;
    }
  });
}

Answer 2

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

＆＃13;

$('div[id="element_x_"]').each(function(i) {
  $(this).replaceWith(this.outerHTML.replace(/_x_/g, i + 1));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element_x_">
  <p>Line number _x_</p>
</div>
<div id="element_x_">
  <p>Line number _x_</p>
</div>

＆＃13;

Answer 3

你不应该循环和ID，因为它应该是唯一的。您需要添加class，或按类型（div）

选择元素

$('.elt_x').each(function(i) {
  var thisElt = $(this);
  var thisChild = thisElt.children("p");
  thisElt.attr("id", thisElt.attr("id").replace("_x_", i+1)).removeClass("elt_x");
  thisChild.text(thisChild.text().replace("_x_", i+1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element_x_" class="elt_x">
  <p>Line number _x_</p>
</div>
<div id="element_x_" class="elt_x">
  <p>Line number _x_</p>
</div>

Answer 4

从id到class 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>

Answer 5

另一方面，处理属性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标记之前，应该在服务器端处理此问题。

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

5 个答案: