need to use forEach loop twice with unique id

Question

I am looping a list and displaying each item in the list.

Each item in-turn can have a list and I need to loop them again and show. following is the code I am using,

<c:forEach var="i" items="${someThing.uList}">
    <tr>
        <td><input type="radio" name="thelist" value="${i.id}"/>${i.number}</td>
        <td>${i.name}</td>
        <td>${i.class}</td>
        <td>${i.date}</td>
        <c:if test="${not empty i.childs}">
        <td><input type="button" value="+" id="link" onclick="showChilds('child');"/></td>
        </c:if>
    </tr>
    <c:if test="${not empty i.childLoads}">
        <tr id="child">
        <c:forEach var="c" items="${i.childLoads}">
            <td><input type="checkbox" name="thelists" value="${c.id}"/>${c.number}</td>
            <td>${i.name}</td>
            <td>${i.class}</td>
            <td>${i.date}</td>
        </c:forEach>
        </tr>
    </c:if>
</c:forEach>

When the page loads, I want to hide the second loop, given id as child, but only the first child is hidden all others are still showing. How to hide all the childs? I can create a unique id but how can I pass that to javascript to hide or show depending on user click event?

You need to give the `` elements a **class**, not an **id** - id values must be unique on the page, and your code is giving the same id to many elements. — Pointy, Jul 11 '13 at 15:09

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You can give that tr a className of child instead of id of child. Then you can use a javaScript function that does document.getElementsByClassName('child') and use for loop to style these elements as hidden.

 <!DOCTYPE html>
<html>
<head>
<script>
function load()
{
var elements = document.getElementsByClassName('child');
for(var i=0; i<elements.length; i++){
elements[i].style.display='none';
}
}
</script>
</head>
<body onload="load()">
<table>
    <tr>Trs wont appear below</tr>
    <tr class="child"><td>Child1</td></tr>
    <tr class="child"><td>Child2</td></tr>
<tr class="child"><td>Child3</td></tr>
<tr class="child"><td>Child4</td></tr>
</table>
</body>
</html>

here is the fiddle http://jsfiddle.net/nMVrX/2/

To enable hide and show, add the iterator i to the class name

ie your button would be like

<td><input type="button" value="+" id="link" onclick="showChilds('child${i}');"/></td>

and your tr tag would look like this

<tr class="child${i}">

refer this to make getElementsByClassName available to IE https://stackoverflow.com/a/7410966/1714501

i can hide as you said..but, what if it comes to display when needed — user1609085, Jul 11 '13 at 15:40
getElementByClassName doesn't support in IE, so I cannot go with that! — user1609085, Jul 11 '13 at 19:22
changed a little like: `function getElementsByClassName(node, classname) { var a = []; var els = node.getElementsByTagName("tr"); for (var i = 0; i < els.length; i++){ var name = (els[i].className).toString(); if(name.substring(0,9)=="childLoad") a.push(els[i]); } return a; }` to my usage and it works as I want. thanks Man! — user1609085, Jul 12 '13 at 13:38

need to use forEach loop twice with unique id

1 Answers1