【如何使用c标签来实现html中div的循环输出以达到动态页面的目的 _JSP 】

如何使用c标签来实现html中div的循环输出以达到动态页面的目的

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(2)

JSP

详细描述

在做任務的時候一開始我們拿到的是一個很多重複代碼的前端頁面，我們可以通過C標簽來減少這些重複的代碼，但是有的時候在錯誤的DIV位置使用C標簽會導致頁面十分混亂，這就需要我們判斷正確的DIV位置來插入C標簽

c:foreach中嵌套c:if来达到循环和判断的
<c:forEach items="${jobListtype}" var="jobtype" varStatus="st" >

<div class="container">
        <div id="${jobtype.type}" class="row col-12 qianduankaifafangxiang">
        <%--前端开发方向--%>
            ${jobtype.type}方向
    </div>
</div>
<div class="container">

<div class="zhiweiliebiaopart1">
                <img class="people" src="${job.image}">
                <div class="zhiweiliebiaopart1-1">
                    <div><strong>${job.name}</strong></div>
                    <div class="font-size10 ">${job.introduction}</div>
                </div>
            </div>
            <div class="easy-father">
                <div class="easy">
                    门槛
                    <img src="<%=request.getContextPath()%>/image/职位列表_07.png">
                </div>
                <div class="easy">
                    难易程度
                    <img src="<%=request.getContextPath()%>/image/职位列表_07.png">
                    <img src="<%=request.getContextPath()%>/image/职位列表_07.png">
                </div>
            </div>
            <div class="easy-father">
                <div class="easy1">
                    成长周期1-3年
                </div>
                <div class="easy">
                    稀缺程度${job.need}家公司需要
                </div>
            </div>

<div class="easy-father">
                <div class="cash">薪资待遇</div>
                <div class="border">
                    <div>0-1年     5k-10k</div>
                    <div class="border-topbottom">1-3年     10k-20k</div>
                    <div>1-3年     10k-20k</div>
                </div>
            </div>
            <div class="border1">有${job.totals}人正在学</div>
            <div class="border1">${job.prompt}</div>
            <div class="coverios">
                <div class="h4">IOS开发</div>
                iOS是由苹果公司开发的移动操作统，iOS与苹果的Mac OS X操作系统一样，也是以Darwin为基础的， 因此同样属于类Unix的商业操作系统。国内iOS开发起步相对较晚，人才培养机制更是远远跟不上市场发展速度。 有限的iOS开发人才成了国内企业必争的资源。国内iOS开发起步相对较晚，人才培养机制更是远远跟不上市场发展速度。 有限的iOS开发人才成了国内企业必争的资源。
            </div>
        </div>
        <div class="col-lg-1 col-sm-2"></div>
        </c:if>
        </c:forEach>
    </div>
</div>
</c:forEach>
</body>
</html>效果

错误截图

编辑于2025-04-09

时间排序

热门排序

[无名弟子]李恪非
0

需要注意的是c:foreach、c:if的插入位置，要注意前端的静态html页面中div盒子的结构和位置，上图代码已经是我跑通实现功能的代码，如果放错位置会导致页面结构错乱或者没有输出，虽然现在后端很少接触前端页面但是普通的c标签还是应该熟练应用。

查看全部>

编辑于2018-04-13
[郑州|结业弟子]JAVA-张泉良
0

在合适的地方加入c:if ,c:foreach ,具体可以了解下bootStrap的栅格系统，这样就找到合适的div

......

查看全部>

编辑于2019-03-22

去第页