Question

我有这个php网页，它抓取包含排名，名称和金额的有序列表。我无法改变这个清单对我的影响。然而，我想用jQuery做的是将等级改为合适的百分比（（d-value-div / sum-all-values）* 100）。

如果您运行下面的剪辑，您可以看到我能够计算所有值的总和。您还可以看到我能够将等级更改为正确的百分比，但仅限于第一行的百分比。我希望看到的是其他职级的正确百分比。

电流：
55.12％name1 $ 70
55.12％name2 $ 35
55.12％name3 $ 20
55.12％name4 $ 2

目标：
55.12％name1 $ 70
27.56％name2 $ 35
15.75％name3 $ 20
1.57％name4 $ 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>

提前致谢，的易燃物

Answer 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]”）（在移动设备上，稍后会改进格式化。）

Answer 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>

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

2 个答案: