如何使用javascript'；用户界面中的getElementById：重复？

我正在用

遍历项目列表。在内部，我使用javascript为每个迭代处理一些数据，并希望将其输出到为每个迭代创建的div中。 下面的代码当然只会输出最后一次迭代的数据（之前的数据会被覆盖）。我想不出一个办法来做这件事

这是jsf代码：

<ui:repeat var="item" value="#{someBean.items}">
    <script type="text/javascript">
        var item = "#{item.id}";
        showItem();
    </script>
    <div id="#{item.id}"></div>
</ui:repeat>

尝试这样做：

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
        showItem("#{item.id}");
    </script>
</ui:repeat>

原因是，即使您将每个var包装在一个脚本标记中，它们都在全局范围内，因此在循环的每次迭代中都会相互过度写入

要赋予每个脚本块它自己的作用域，您可以像这样将变量包装在一个自动执行函数中，但根据您当前的逻辑，这似乎有点过分：

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
    (function(){
        var item = "#{item.id}";
        showItem(item);
    })();
    </script>
</ui:repeat>

（功能（）{
var item=“#{item.id}”；
展示项目（项目）；
})();

您可以使用“getElementsByName”获取所有项目，然后在循环中显示它们。当然，其他方法包括“getElementsByClassName”或jQuery

<ui:repeat id="outer" var="item" value="#{someBean.items}">
   <div id="#{item.id}" name="item"></div> 
</ui:repeat>

<script type="text/javascript">
function showAllItems(){
    var items = document.getElementsByName('item');
    for(var index in items)
    {
         showItem(items[index].id);
    }
};
showAllItems();
</script>

函数showAllItems（）{
var items=document.getElementsByName（'item'）；
对于（项目中的var索引）
{
showItem（项[索引].id）；
}
};
showAllItems（）；

谢谢您的回答。我先尝试了subhaze的答案，它对我很有效，但我也很感激你的答案。确定以后会有其他人受益。。。

<ui:repeat var="item" value="#{someBean.items}">
    <div id="#{item.id}"></div>
    <script type="text/javascript">
    (function(){
        var item = "#{item.id}";
        showItem(item);
    })();
    </script>
</ui:repeat>

<ui:repeat id="outer" var="item" value="#{someBean.items}">
   <div id="#{item.id}" name="item"></div> 
</ui:repeat>

<script type="text/javascript">
function showAllItems(){
    var items = document.getElementsByName('item');
    for(var index in items)
    {
         showItem(items[index].id);
    }
};
showAllItems();
</script>