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

Question

在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>
...

我希望能够在表的每一行(这两列之间)显示一个Progress Bar，它以图形形式表示已经实现的“成本节约”的百分比。

也就是说，对于第一行，JQuery可能类似于：

function CalculatePercentage(){
    return ($("#implG13").val() / ($("#implG13").val() + $("#unimplG13").val()));
}

$("#progressbarG13").progressbar({
    $value : CalculatePercentage()
});

问题是表有可变的行数。我可以编程地分配唯一的I来引用“已实现的成本节约值”、“未实现的成本节约值”和每一行上的进度条。

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

这是我第一次用JQuery编程(JQuery是一个javascript库还是什么的？)所以请原谅我的天真！

Answer 1

类似这样的东西

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>

Javascript (使用jquery)

$("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)
    });
});

Answer 2

您可以使用一些jQuery中更复杂的选择器，例如，从选择器开始。

$('[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()));
}

您可以查看一下引导进度条，以找到一些相对容易实现的。

祝好运!