jQuery：使用不同的 div 值计算百分比？答案

【问题标题】：jQuery: Calculating percentages using different div values?jQuery：使用不同的 div 值计算百分比？
【发布时间】：2017-01-28 14:33:28
【问题描述】：

我有这个 php 网页，它抓取一个包含排名、名称和数量的有序列表。我无法更改此列表如何获取我。然而，我想用 jQuery 做的是将排名更改为合适的百分比 ((d-value-div/sum-all-values)*100)。

如果您运行下面的代码片段，您可以看到我能够计算所有值的总和。您还可以看到，我能够将排名更改为正确的百分比，但只能更改为第一行的百分比。我希望看到的是其他排名中的正确百分比。

当前：
55.12% 姓名1 $70
55.12% 姓名2 $35
55.12% 姓名3 $20
55.12% 姓名4 $2

目标：
55.12% 姓名1 $70
27.56% 姓名2 $35
15.75% 姓名3 $20
1.57% 姓名4 $2

如何做到这一点？

		var sum = 0.0;
		$(document).ready(function() {
		  $('.row #d-value').each(function() {
		    sum += parseFloat($(this).text().replace('$', ''));
		  });

		  $('.row #d-rank').each(function() {
		    entry = parseFloat($('.row #d-value').text().replace('$', ''));
		    $(this).text((((entry / sum) * 100)).toFixed(2) + '%');
		  });

		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <span class="cell" id="d-rank">1</span>
  <span class="cell" id="d-name">name1</span>
  <span class="cell" id="d-value">$70</span>
</div>

<div class="row">
  <span class="cell" id="d-rank">2</span>
  <span class="cell" id="d-name">name2</span>
  <span class="cell" id="d-value">$35</span>
</div>

<div class="row">
  <span class="cell" id="d-rank">3</span>
  <span class="cell" id="d-name">name3</span>
  <span class="cell" id="d-value">$20</span>
</div>

<div class="row">
  <span class="cell" id="d-rank">4</span>
  <span class="cell" id="d-name">name4</span>
  <span class="cell" id="d-value">$2</span>
</div>

提前致谢， 火种盒

【问题讨论】：

在我的手机上，所以无法测试，但尝试在入口变量前添加 var。现在的样子，它是一个全局变量，你想要一个局部变量。
您有四个具有相同 id 的元素，id="d-value"。
另外，#d-value 不能多次使用。它是一个标识。改用一个类。

标签： jquery

【解决方案1】：

您多次使用 ID，这是无效的。只有第一个 id 会被引用。改为将项目 id 更改为类。

<div class="row">
  <span class="cell d-rank">2</span>
  <span class="cell d-name">name2</span>
  <span class="cell d-value">$35</span>
</div>


            var sum = 0.0;
    $(document).ready(function() {
      $('.row .d-value').each(function() {
        sum += parseFloat($(this).text().replace('$', ''));
      });

      $('.row .d-rank').each(function() {
        var entry = parseFloat($(this).sibling(".d-value').text().replace('$', ''));
        $(this).text((((entry / sum) * 100)).toFixed(2) + '%');
      });

    });

如果您无法更改 HTML，则必须通过其他方法引用它们，例如 nth-child 或查找 attr id。例如 $(this).sibling("div[id=d-value]") （在移动设备上，稍后会改进格式。）

【讨论】：

我可以把它改成类。感谢 teynon 的帮助！

【解决方案2】：

您的代码中有重复的 ID，这可能会给您带来问题。我认为浏览器只计算第一个。所以将 id="d-value" 改为 class="d-value" 并改变这个：

<head>
    <title></title>
    
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
   
</head>
<body>

    <div class="row">
        <span class="cell d-rank" id="d-rank">1</span>
        <span class="cell d-name" id="d-name">name1</span>
        <span class="cell d-value" id="d-value">$70</span>
    </div>

    <div class="row">
        <span class="cell d-rank">2</span>
        <span class="cell d-name">name2</span>
        <span class="cell d-value">$35</span>
    </div>

    <div class="row">
        <span class="cell d-rank">3</span>
        <span class="cell d-name">name3</span>
        <span class="cell d-value">$20</span>
    </div>

    <div class="row">
        <span class="cell d-rank">4</span>
        <span class="cell d-name">name4</span>
        <span class="cell d-value">$2</span>
    </div>
    <script>
        var sum = 0.0;
        $(document).ready(function ()
        {
            $('.row .d-value').each(function ()
            {
                sum += parseFloat($(this).text().replace('$', ''));
            });

            $('.row .d-rank').each(function ()
            {
                entry = parseFloat($(this).next().next().text().replace('$', ''));
                $(this).text((((entry / sum) * 100)).toFixed(2) + '%');
            });

        });
    </script>

【讨论】：

编辑：nvm，使用 .prev 而不是 .next。 --- 我现在有个小问题，我确实把数量和等级换了。（70 美元姓名1 55.12%）由于某种原因您的修复停止工作。
请给我密码。我不明白你的意思。