如何在 ui:repeat 中为 javascript 代码生成不同的 div id

Question

我有一个 ui:repeat 组件，在 ui:repeat 内部有一个在我的 javascript 代码中使用的 div。我必须在每个 ui:repeat 调用上动态更改此 div id。我怎样才能使它成为可能？

请找到以下代码供您参考。

Xhtml代码

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>

 <div id="idToChange">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

JS代码

 function loadFunction() {
     let varsome= document.getElementsById('idToChange');

     }

Answer 1

这应该可以访问rowStatus.index。

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>

 <div id="prefix#{rowStatus.index}">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

编辑

<ui:repeat var="id1" value"#{somethingbean.some"} id="repeaterId" varStatus="rowStatus" 
  rendered="somethingbean.some.someisthere">
 <fieldset class="mock">
 <legend></legend>
 <input type="checkbox" onclick="(evt)=>handleCheckboxClicked(evt,'prefix#{rowStatus.index}')" />
 <div id="prefix#{rowStatus.index}">
  .....................................................
  .............................................................
 </div>

</fieldset>
</ui:repeat>

function handleCheckboxClicked(evt,id){
    const div = document.getElementById(id);
    
}