Javascript 如何使用带有动态分配的输入ID的JQuery进度条？

在MVC视图中创建的表的一部分：

它背后的一些HTML：

...
<tr>
    <td>
        <div id="implG13">252,849.00</div>
    </td>
    <td>
        <div id="progressBarG13"></div></td>
    <td>
        <div id="unimplG13">234,687.00</div>
    </td>
</tr>

<tr>
    <td>
        <div id="implG19">239,773.00</div>
    </td>
    <td>
        <div id="progressBarG19"></div></td>
    <td>
        <div id="unimplG19">174,397.00</div>
    </td>
</tr>
...

问题是该表的行数可变。我可以通过编程方式分配唯一ID，以引用每行上的“已实现的成本节约值”、“未实现的成本节约值”和进度条

我如何在JQuery中实现这一点，从而不必创建显式引用这些ID的新函数，就像C#中的命名参数一样

这是我第一次用JQuery编程（JQuery是javascript库还是什么？），请原谅我的天真

您可以使用一些，例如，以选择器开头

$('[id^="progressbar"]').each(function() {
    var currentId = $(this).attr('id');
    var index = currentId.replace("progressbar",""); // This removes progressbar from the ID so you get the unique identifier
    var percentage = calculatePercentage(index);
    // Do something with percentage to display it somewhere.
});

function calculatePercentage(index) {
     return ($("#impl"+index).val() / ($("#impl"+index).val() + $("#unimpl"+index).val()));
}

您可以查看以找到一些相对容易实现的

祝你好运

诸如此类

HTML标记

<tr>
    <td>
        <div class="impl" id="implG13">252,849.00</div>
    </td>
    <td>
        <div class="bar" id="progressBarG13"></div>
    </td>
    <td>
        <div class="unimpl" id="unimplG13">234,687.00</div>
    </td>
</tr>

---

您可以处理类而不是ID，并在所有

tr

@mguimard上进行迭代，您能详细说明一下吗？那么，我该如何为每行的每个进度条设置不同的值呢？当然，请参见下面的回答。谢谢你的回答，但它似乎不起作用，我只是得到了很多进度条，它们看起来都有一个val为1或什么的（我把测试数据放进去，应该返回99%），我认为我得到了，值公式应该是(（impl/（impl+unpl））*100）但这似乎仍然不起作用$tr.find（“.impl”）.val（）；每次都返回一个空字符串，它不会提取值。再次感谢，你能看到这里出了什么问题吗？！似乎是数据的格式（带逗号的浮点）。使用parseFloat（impl.replace（/，/g，）；和parseFloat（unpl.replace（/，/g，）；

<tr>
    <td>
        <div class="impl" id="implG13">252,849.00</div>
    </td>
    <td>
        <div class="bar" id="progressBarG13"></div>
    </td>
    <td>
        <div class="unimpl" id="unimplG13">234,687.00</div>
    </td>
</tr>

$("tr").each(function(){
    var $tr = $(this);
    var impl = $tr.find(".impl").val();
    var unimpl = $tr.find(".unimpl").val();
    $tr.find(".bar").progressbar({
        $value : impl/(impl+unimpl)
    });
});