直播网站开发计划书,软文案例500字,企业网站规划要求,工艺品网站域名基于以前的项目进行修改优化#xff0c;前端代码根据List元素在html里进行遍历显示
原先的代码#xff1a;
其中#xff0c;noticeGuide.Id是标识noticeGuide的唯一值#xff0c;但是不是从0开始的【是数据库自增字段】
但是在页面初始化加载的时候#xff0c;我们只想…基于以前的项目进行修改优化前端代码根据List元素在html里进行遍历显示
原先的代码
其中noticeGuide.Id是标识noticeGuide的唯一值但是不是从0开始的【是数据库自增字段】
但是在页面初始化加载的时候我们只想显示Id在最前面的那个即 $(document).ready(function() {showWhichDiv(0);//页面加载时显示第一项$(#a1).attr(style,color:#05A6F3;);});
如何在$(document).ready(function()不额外请求后端noticeGuideList数据的情况下完成
想到的第一个办法
就是元素命名的时候按照元素在列表里的下标命名
即div idtitle${noticeGuide.index} classtitle styledisplay: view;${noticeGuide.type}/div
但是noticeGuide并没有index字段而且这个前端写得很原始循环是下面的形式
for(){}
在这里无法也用下面类似语句来获取元素下标
for(var i 0; ilist.length;i ){}
连Thymeleaf模板引擎也在此失效
div classright div classcontent th:block th:eachnoticeGuide, status : ${noticeGuideList} div idtitle${status.index} classtitle styledisplay: none; th:text${noticeGuide.type}/th:text /div div idrecruitBatch${noticeGuide.id} classtitle styledisplay: none; 对应批次th:text${noticeGuide.recruit_batch_names}/th:text /div div idcontext${noticeGuide.id} classcontent styledisplay: none; th:text${noticeGuide.content}/th:text /div /th:block /div
/div
放弃
最终解决办法
设定classtitle的地方具有独特性【即次序以及数目与noticeGuideList中的元素一致】
那么接下来按照如下思路编写初始化函数
第一获取所有classtitle的元素形成元素列表
第二获取其中第一个元素的id【在这里就是title${noticeGuide.id}】
第三取得第一个元素id中的${noticeGuide.id}部分 $(document).ready(function() {var firstGuideId $(.title)[0].id.substring(5);console.log(firstGuideId);showWhichDiv(firstGuideId);//页面加载时显示第一项$(#a1).attr(style,color:#05A6F3;);});
好的看到输出的id正确且页面显示正确成功 参考 jquery 获取当前class在列表中的下标
html页面使用for(){},if(){}前端bootstrap_Java-CSDN问答
