如何在ui中使用javascript的getElementById：repeat？

Question

我正在使用<ui:repeat>迭代項目列表。裏面我使用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> 

這是功能：

function showItem(){ 
    document.getElementById(item).innerHTML = 'this is an item'; 
} 

Answer 1

試着這樣做：

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

-

function showItem(item){ 
    document.getElementById(item).innerHTML = 'this is an item'; 
} 

原因在於即使每個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> 

Answer 2

您可以使用「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>