I am generating HTML5
page menu items in JSP
by reading data from the list that is in ServletContext
(using JSTL foreach
loop). And this way I am creating content of the <nav> HTML5
tag.
This works fine, I am getting page look I want. But, when I look at the HTML
page source (generated from JSP), there are too many empty lines (blank space), generated in foreach
loop.
This the code that generates this content:
<li><a href="#">Categories</a>
<ul class="droprightMenu">
<li><a href="#">All</a>
<ul class="droprightMenu">
<!-- first list iteration, top level categories, level1 -->
<c:forEach items="${categories }" var="catLevel1">
<c:if test="${catLevel1.getParentCategory()==null }">
<li><a href="#">${catLevel1.getName() }</a> <!-- second list iteration, level 2 categories,
parentCategory is level1 -->
<ul class="droprightMenu">
<c:forEach items="${categories }" var="catLevel2">
<c:if
test="${catLevel2.getParentCategory().getId()==catLevel1.getId() }">
<li><a href="#">${catLevel2.getName() }</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
<c:forEach items="${categories }" var="catLevel3">
<c:if
test="${catLevel3.getParentCategory().getId()==catLevel2.getId() }">
<li><a href="#">${catLevel3.getName() }</a></li>
</c:if>
</c:forEach>
</ul></li>
</c:if>
</c:forEach>
</ul></li>
</c:if>
</c:forEach>
</ul></li>
</ul></li>
and the generated content looks something like this:
<li><a href="#">Categories</a>
<ul class="droprightMenu">
<li><a href="#">All</a>
<ul class="droprightMenu">
<!-- first list iteration, top level categories, level1 -->
<li><a href="#">Sports</a> <!-- second list iteration, level 2 categories,
parentCategory is level1 -->
<ul class="droprightMenu">
<li><a href="#">Football</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
</ul></li>
<li><a href="#">Basketball</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
</ul></li>
<li><a href="#">Hockey</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
</ul></li>
</ul></li>
<li><a href="#">Politics</a> <!-- second list iteration, level 2 categories,
parentCategory is level1 -->
<ul class="droprightMenu">
</ul></li>
<li><a href="#">IT</a> <!-- second list iteration, level 2 categories,
parentCategory is level1 -->
<ul class="droprightMenu">
<li><a href="#">Software</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
</ul></li>
<li><a href="#">Hardware</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
</ul></li>
<li><a href="#">Programming</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
</ul></li>
<li><a href="#">Tutorials</a> <!-- third list iteration, level3 categories
parentCategory is level2 -->
<ul class="droprightMenu">
</ul></li>
</ul></li>
</ul></li>
</ul></li>
How to prevent generating these empty lines? So that page source markup looks normal.