javascript - 如何将具有相同类的多个元素中的文本提取为字符串，更改文本并将它们放回每个原始位置？

Question

我想知道是否有任何方法可以获取具有相同类的元素的所有文本

例子：

<div class = "tochange"> Text to change - 1 </div>
     <h3 class = "tochange"> Text to change - 2 </h3>

<div class = "tochange"> Text to change - 3 </div>

<select class = "tochange"> Text to change - 1 </select>
     <option class = "tochange"> Text to change - 4 </option>
     <option class = "tochange"> Text to change - 5 </option>
     <option class = "tochange"> Text to change - 6 </option>
     <option class = "tochange"> Text to change - 7 </option>

<span class = "tochange"> Text to change - 8 </>

<script>
  var arrayFromClass = [];
$ ('.tochange'). each (function () {
     arrayFromClass.push (this.innerText);
});
  var ArrayToString = arrayFromClass.toString();
</script>

更改这些文本中的每一个，然后将它们放回原始 DOM

标签： javascriptjquery

Answer 1

这是你想要的：

const modifyAll = ()=>{
  [...document.querySelectorAll('.tochange')].map(el=>{
    el.innerHTML='FOO'+el.innerHTML;
  });
};
setTimeout(_=>{
  modifyAll();
},1000)

<div class="tochange"> Text to change - 1 </div>
<h3 class="tochange"> Text to change - 2 </h3>

<div class="tochange"> Text to change - 3 </div>

<select class="tochange"> Text to change - 1 </select>
<option class="tochange"> Text to change - 4 </option>
<option class="tochange"> Text to change - 5 </option>
<option class="tochange"> Text to change - 6 </option>
<option class="tochange"> Text to change - 7 </option>

<span class="tochange"> Text to change - 8</span>