使用 Javascript 在多个 div 中插入字符串答案

【问题标题】：insert string across multiple divs with Javascript使用 Javascript 在多个 div 中插入字符串
【发布时间】：2016-02-03 04:34:42
【问题描述】：

我正在尝试在价格 div 中插入逗号。价格正在从数据库中提取。

到目前为止，我得到了这个：

function myFunction() {
    var x = document.getElementById("portfolio_price").innerHTML;
    var len = x.length;
var y = x.substring(0, len-3) + "," + x.substring(len-3);
     document.getElementById("portfolio_price").innerHTML = y;
}
 myFunction()

这对于更改一个很好，但我需要它来更改页面上显示的所有 div。

一如既往地欢迎所有反馈。

【问题讨论】：

这对于 JQuery 来说是一项简单的任务。您可以访问 JQuery 吗？
所有 DIV 元素，就像所有这些元素一样，不仅仅是具有某个类或其他标识符的元素，而是每个最后一个 DIV 元素

标签： javascript string insert innerhtml getelementbyid

【解决方案1】：

您不能有多个具有相同 ID 的元素。这就是为什么它只返回一次。将 ID 更改为 Class。

【讨论】：

【解决方案2】：

我已经能够让这个 jQuery 在 jFiddle 中工作：

 function addCommas(nStr)
 {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
       return x1 + x2;
 }

$(function(){
   $(".format").each(function(c, obj){
      $(obj).text(addCommas(parseFloat($(obj).text()).toFixed(2)));
   });
});

但我似乎无法在我正在开发的 wordpress 网站上运行它。我在玩jQuery.noConflict();，但老实说我很困惑。

【讨论】：

【解决方案3】：

为每个元素添加一个类名，并使用document.querySelectorAll() 和CSS-selector for class 检索具有该类的所有元素的列表。然后使用NodeList.forEach() 遍历元素并将该函数作为回调传递给它。

请参阅以下示例中的演示。当用户单击包含文本“添加逗号”的按钮时，将添加逗号。

function addCommas() {
  //get a list of elements with class attribute containing 'portfolio_price'
  var priceContainers = document.querySelectorAll(".portfolio_price");

  //run the function on each element in the list
  priceContainers.forEach(function(priceContainer) {
    var x = priceContainer.innerHTML;
    var len = x.length;
    var y = x.substring(0, len - 3) + "," + x.substring(len - 3);
    priceContainer.innerHTML = y;
  });
}
document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('addCommas');
  button.addEventListener('click', addCommas);
});

<div class="portfolio_price" id="price_1">10.20</div>
<div class="portfolio_price" id="price_2">10.20</div>
<button id="addCommas">Add Commas</button>

正如 Luvn Jesus 建议的那样，您可以使用 jQuery 或类似的库来利用辅助函数。例如，

var priceContainers = document.querySelectorAll(".portfolio_price");

可以简化为

var priceContainers = $(".portfolio_price");

【讨论】：