Javascript 百里香；jQuery:进度条脚本仅对第一个列表项起作用

我有一个HTML列表，从H2DB获取项目。在同一列表的第二列中，我显示了一个进度条。问题是，该脚本仅适用于第一个列表项。这是因为我给列表项提供了ID“actualcost”，脚本使用这个ID工作

HTML如下所示：

<tr th:each="item : ${list}">
<td th:text="${item.getActualcost()}" id="actualcost">Actual Cost</td>
<td><div class="progress"><div id="progressPlaceholder"></div>
</div></td>
</tr>

实际成本

剧本：

<script>
        $(document).ready(function() {
            var value=$('#actualcost').text(),place=4;
            var progress = '<div class="progress-bar" role="progressbar" aria-valuenow="'+value+'" aria-valuemin="0" aria-valuemax="100" style="width: '+value+'%;"><span class="show">Ranked '+place+' of '+value+'</span></div>';
            $('#progressPlaceholder').empty().append(progress);
        });
        </script>

$（文档）.ready（函数（）{
var值=$（'#actualcost'）.text（），place=4；
风险值进度='排名'+位置+'的'+价值+''；
$（'#progressPlaceholder'）.empty（）.append（progress）；
});

---

如何在脚本中分别为每个列表项的每个对象获取值actualcost

ID必须是唯一的，jQuery只找到ID为的第一个元素，使用classes而不是HeadOK，但是如何在脚本中获取类呢？您可以使用

$（'.classname'）

在jQuery中按类进行选择，或者这是thymeleaf特有的问题阻碍了您？您可能需要为您的问题添加更多代码和解释。@user3154108好的，成功了。谢谢但它仍然只对第一个列表项起作用。如果添加第二个列表项，则该值不会显示在第二行中，而是添加到第一行的进度条中。我想这是因为.text（）将第二个值添加到现有字符串中。我必须在脚本中写“每个…”之类的东西吗？