将手风琴元素的内容分组 html

如何解决将手风琴元素的内容分组 html

我正在开发一个网站，其中一部分是从数据库接收数据的 jsp。该数据以手风琴形式呈现。问题是第一个值重复了，因此您必须将第一个值分组为手风琴按钮，将第二个值分组为内容。

我有从 servlet 接收对象列表的 jsp。

手风琴的按钮是重复的，手风琴的内容是

number 1
number 2
number 3
letter a
letter b
letter C
word hello

手风琴是

>number
     1
     2
     3
>letter
     a
     b
     c
>word
     Hello

到目前为止，我拥有的代码是

    <c:forEach items = "${datas}" var = "data">

        <button class = "accordion"> ${data.getData()} </button>

        <c:forEach items = "${datas}" var = "dataint">
            <c:if test = "${data.getData() eq dataint.getData()}">

                <div class = "panel">
                    <p> ${dataint.getFin()} </p>
                </div>

            </c:if>

        </c:forEach>

    </c:forEach>

手风琴和数据显示工作正常，但我需要将所有元素和内容作为手风琴的按钮放在重复的第一个。

我想得到什么：

我得到了什么：

解决方法

您可以在 <c:forEach.. 循环之外设置一个变量并为其分配任何随机值。然后，在每个循环中，您可以检查 current value 和变量值是否为 not equal，然后仅执行更多代码。

因此，您的代码将如下所示：

<c:set var="keys" value="somethings"/>
  <c:forEach items = "${datas}" var = "data">
    <c:if test="${keys ne data.getData()}">
        <c:set var="keys" value="${data.getData()}"/>
        <button class = "accordion"> ${data.getData()} </button>
            <div class = "panel">       
                <c:forEach items = "${datas}" var = "dataint">
                    <c:if test = "${data.getData() eq dataint.getData()}">
                        <p> ${dataint.getFin()} </p>
                    </c:if>
                </c:forEach>
            </div>
    </c:if>
 </c:forEach>

（我只是在这里展示逻辑。这段代码没有经过测试。对于任何语法错误，抱歉）