对手风琴元素的内容进行分组 html

Question

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

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

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

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>

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

我想要得到的东西：

我得到了什么：

Answer 1

您可以在 <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>

（我只是在展示逻辑 here.This 代码未经过测试。对于任何语法错误，我们深表歉意）

对手风琴元素的内容进行分组 html

Group the content of accordion elements html

html

jsp

accordion

jquery-ui-accordion