Question

我正在使用JSP开发一个小型Web应用程序，成功检索数据，我的任务是使用bootstrap选项卡式菜单将选项卡下的数据分组。真正的任务是根据选项卡单击显示数据。但是当我尝试在单个选项卡中显示多行时，它只显示最后一行（值）。这是因为div标签id正在重复。请找到下面的代码并告诉我我在哪里犯了错误。（我想将id分组，如果它重复，但我无法找到它）

我的HTML代码：

while (rs1.next()) {
                    PositionID = rs1.getString(1);
                    PositionTitle = rs1.getString(2);
                    StudentID = rs1.getString(7);
                    Bio = rs1.getString(10);
                    ProfileID = rs1.getString(11);
        %>

            <div class="tab-pane fade active in" id="<%=PositionTitle%>">
                <%

                %>
                <div class="col-md-5">
                    <input type="radio" name="<%=ProfileID%>"
                        value="<%=ProfileID%>"><%=FirstName%>,
                    <%=LastName%><br>
                </div>

            </div>


            <%




                    }
                %>
                </div>
            <%

                    connection.close();
                    }

                    catch (Exception e) {
                        e.printStackTrace(response.getWriter());
                    }
                %>

Answer 1

我可以使用javascript提供解决方案但是，如果您在后端有解决方案，则必须使用它。

首先，如果您的网页具有相同的ID而不是一个坏事。您必须使用其他内容更改id属性（例如data-id）。

var uniqueIds = [];

$(".tab-pane").each( function () {

    var id = $(this).attr("data-id");

    if ( $.inArray( id, uniqueIds ) == -1 )
        uniqueIds.push( id )

});

for ( var i = 0; i < uniqueIds.length; i++ ) {

    var allItems = $("[data-id='" + uniqueIds[i] + "']");    
    var firstItem = allItems.eq(0);
    var restItems = allItems.not(":eq(0)");

    restItems.appendTo( firstItem )

}

我会为它创造一个小提琴。你也可以在那里看到它。

http://jsfiddle.net/ebilgin/vyf1gswv/1/

<div>标记id在while循环中重复

1 个答案: