Question

我必须更改div内跨度的数据所有跨度的类都是相同的，所有div的类都是一样。

我试过循环推荐，但它没有做我想要的。我需要找到一种更好的方法而不是循环，因为它也可以在一行中完成，我可以使用JavaScript一次性替换所有跨度的数据。

＆＃13;

var testimonials = document.querySelectorAll('.step_input');
Array.prototype.forEach.call(testimonials, function(elements, index) {
  console.log(elements);
});

＆＃13;

<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span>
  <span class="ing-tag_1"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_0"> The data to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span>
</div>

＆＃13;

Answer 1

document
  .querySelectorAll('.step_input > .ing-tag_0')
  .forEach(e => e.innerHTML = 'REPLACED');

<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span>
  <span class="ing-tag_1"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_0"> The data to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span>
</div>

注意：querySelectorAll已经返回Array。

注意²：这将替换.ing-tag_0类的直接孩子。如果此类可以包装在另一个元素中并且也应该替换，则只需删除选择器中的>。

Answer 2

您可以使用以下代码

var testimonials = document.querySelectorAll('.step_input > .ing-tag_0');
Array.prototype.forEach.call(testimonials, function(elements, index) {
     elements.innerHTML = 'new text'; 
});

<div  class="step_input" contenteditable="true">The class of div is same <span class="ing-tag_0"  > The data to be changed </span>
<span class="ing-tag_1"  > The data not to be changed </span>
</div>
<div  class="step_input" contenteditable="true">This one has same class of span<span class="ing-tag_0"  > The data to be changed </span> only<span class="ing-tag_0"  > The data to be changed </span>
</div>
<div  class="step_input" contenteditable="true"><span class="ing-tag_0"  > qweq </span></div>

Answer 3

您可以将选择器修改为var testimonials = document.querySelectorAll('.step_input > .ing-tag_0'); testimonials.forEach(function(spanElem, index) { spanElem.innerHTML = 'spanElem' + index; });。如：

var testimonials = document.querySelectorAll('.step_input > .ing-tag_0');

testimonials.forEach(function(spanElem, index) {
     spanElem.innerHTML = 'spanElem' + index; 
});

更新以反映OP问题中的新代码

请参阅以下演示：

<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span>
  <span class="ing-tag_1"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_0"> The data to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span>
</div>

{{1}}

如何更改div的数据？

3 个答案: