Question

我正在尝试在价格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。

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

Answer 1

为每个元素添加一个类名，并使用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");

Answer 2

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

Answer 3

我已经能够在jFiddle中使用这个jQuery：

 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();，但说实话，我很困惑。

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

3 个答案: