html页面使用@for(){},@if(){},利用jquery 获取当前class在列表中的下标
基于以前的项目进行修改优化,前端代码根据List元素在html里进行遍历显示
原先的代码:
其中,noticeGuide.Id是标识noticeGuide的唯一值,但是不是从0开始的【是数据库自增字段】
但是在页面初始化加载的时候,我们只想显示Id在最前面的那个,即
$(document).ready(function() {showWhichDiv(0);//页面加载时显示第一项$("#a1").attr("style","color:#05A6F3;");});
如何在$(document).ready(function()不额外请求后端noticeGuideList数据的情况下完成
想到的第一个办法
就是元素命名的时候,按照元素在列表里的下标命名
即<div id="title${noticeGuide.index}" class="title" style="display: view;">${noticeGuide.type}</div>
但是noticeGuide并没有index字段,而且这个前端写得很原始,循环是下面的形式
@for(){}
在这里无法也用下面类似语句来获取元素下标
@for(var i = 0; i<list.length;i++ ){}
连Thymeleaf模板引擎也在此失效
<div class="right"> <div class="content"> <th:block th:each="noticeGuide, status : ${noticeGuideList}"> <div id="title${status.index}" class="title" style="display: none;"> <th:text="${noticeGuide.type}"></th:text> </div> <div id="recruitBatch${noticeGuide.id}" class="title" style="display: none;"> 对应批次:<th:text="${noticeGuide.recruit_batch_names}"></th:text> </div> <div id="context${noticeGuide.id}" class="content" style="display: none;"> <th:text="${noticeGuide.content}"></th:text> </div> </th:block> </div>
</div>
放弃
最终解决办法
设定class=title的地方具有独特性【即次序以及数目与noticeGuideList中的元素一致】
那么接下来,按照如下思路编写初始化函数
第一,获取所有class=title的元素形成元素列表
第二,获取其中第一个元素的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问答
相关文章:

html页面使用@for(){},@if(){},利用jquery 获取当前class在列表中的下标
基于以前的项目进行修改优化,前端代码根据List元素在html里进行遍历显示 原先的代码: 其中,noticeGuide.Id是标识noticeGuide的唯一值,但是不是从0开始的【是数据库自增字段】 但是在页面初始化加载的时候,我们只想…...
pulsar: 批量接收消息
接收消息时,和kafka类似,如果topic有多个分区,则只能保证分区内数据的接收有序,不能保证全局有序。 一、发送消息 package cn.edu.tju.test1;import org.apache.pulsar.client.api.*;public class BatchProducer01 {private sta…...

LNMP架构之mysql数据库实战
mysql安装 到官网www.mysql.com下载源码版本 实验室使用5.7.40版本 tar xf mysql-boost-5.7.40.tar.gz #解压 cd mysql-boost-5.7.40/ yum install -y cmake gcc-c bison #安装依赖性 cmake -DCMAKE_INSTALL_PREFIX/usr/local/mysql -DMYSQL_DATADIR/data/mysql -DMYSQL_…...

aws使用记录
数据传输(S3) 安装命令行 安装awscli: https://docs.aws.amazon.com/zh_cn/cli/latest/userguide/getting-started-install.html#getting-started-install-instructions 直到 aws configure list 可以运行 身份验证: 运行: aws config…...

区块链食品溯源案例实现(二)
引言 随着前端界面的完成,我们接下来需要编写后端代码来与区块链网络进行交互。后端将负责处理前端发送的请求,调用智能合约的方法获取食品溯源信息,并将结果返回给前端。 通过前后端的整合,我们可以构建一个食品溯源系统…...

RabbitMQ(简单模式)
2种远程服务调用 1openFeign: 优点:能拿到被调用的微服务返回的数据,系统系耦度高,系统稳定。 缺点:同步调用,如果有很多服务需要被调用,耗时长。 MQ,消息队列,RabbitMQ是消息we…...
ES集群部署的注意事项
文章目录 引言I ES集群部署前期工作II 部署ES2.1 配置安全组2.2 创建ES用户和组2.3 下载安装ES2.4 修改内存相关配置III es集群添加用户安全认证功能3.1 生成 elastic-certificates.p123.2 创建 Elasticsearch 集群密码3.2 设置kibana的 elasticsearch帐号角色和密码3.3 logsta…...

Etcd 基本入门
1:什么是 Etcd ? Etcd 是 CoreOS 团队于2013年6月发起的开源项目,它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法,Etcd基于 Go 语言实现。 名字由来,它源于两个方面,…...

PPT没保存怎么恢复?3个方法(更新版)!
“我刚做完一个PPT,正准备保存的时候电脑没电自动关机了,打开电脑后才发现我的PPT没保存。这可怎么办?还有机会恢复吗?” 在日常办公和学习中,PowerPoint是制作演示文稿的重要工具。我们会在各种场景下使用它。但有时候…...

DBeaver修改sql语句保存位置
1、dbeaver通过工作空间方式来管理Script的sql脚本以及数据库连接。 工作空间,其实也就是一个文件夹 默认保存路径查看: 文件--> 切换工作空间 --> 其他 sql脚本的保存位置默认在工作空间下的 \General\Scripts 文件夹中。 2、 3、点击浏览&#…...

LabVIEW2024中文版软件安装包、工具包、安装教程下载
下载链接:LabVIEW及工具包大全-三易电子工作室http://blog.eeecontrol.com/labview6666 《LabVIEW2024安装图文教程》 1、解压后,双击install.exe安装 2、选中“我接受上述许可协议”,点击下一步 3、点击下一步,安装NI Package …...

对AOP的理解
目录 一、为何需要AOP?1、从实际需求出发2、现有的技术能解决吗?3、AOP可以解决 二、如何实现AOP?1、基本使用2、更推荐的做法2.1 “基本使用”存在的隐患2.2 最佳实践2.2.1 参考Transactional(通过AOP实现事务管理)2.…...
C 指针数组
C 指针数组是一个数组,其中的每个元素都是指向某种数据类型的指针。 指针数组存储了一组指针,每个指针可以指向不同的数据对象。 指针数组通常用于处理多个数据对象,例如字符串数组或其他复杂数据结构的数组。 让我们来看一个实例…...

算法系列--动态规划--背包问题(1)--01背包详解
💕"趁着年轻,做一些比较cool的事情"💕 作者:Mylvzi 文章主要内容:算法系列–动态规划–背包问题(1)–01背包详解 大家好,今天为大家带来的是算法系列--动态规划--背包问题(1)--01背包详解 一.什么是背包问题 背包问题…...
【KB】通过Karabiner-Elements实现 optionTAB与 commandTAB 对调/映射 win 的 altTAB 习惯
学习Karabiner-Elements的第一个 demo,因为推荐的例子中过多参数,这是一个简化版。 需求:对调 optionTAB与 commandTAB,然后安装 altTAB 软件,恢复win切换任务的使用习惯。 {"description": "Change ta…...
nvm node包管理工具
下载地址:版本 1.1.9 CoreyButler/NVM-Windows (github.com) 使用nvm -v 检查安装是否成功。 常用命令 # 安装nodjs版本 nvm install 10.16.3nvm install 14.15.4# 切换,使用nodejs nvm use 10.16.3 ## nvm use 报错,1).使用管理员打开…...

程序员如何兼职赚小钱?
程序员由于有技术和手艺其实兼职赚钱的路子还是挺多的,只要你有足够的时间。 1. 做外包 这是比较传统的方式,甲方在一些众包平台上发布开发任务,你可以抢这个任务,但是价格都比较便宜。 任务比较多的平台: 猪八戒、一品威客、开…...

奥比中光深度相机(一):环境配置
文章目录 奥比中光深度相机(一):环境配置简介电脑环境SDK配置步骤安装环境依赖填写路径,点击Configure选择Visual studio点击Generate完成基于Python的SDK配置方法一:使用Cmake直接打开方法二:通过源文件打…...

API网关-Apisix路由配置教程(数据编辑器方式)
文章目录 前言一、端口修改1. apisix 端口修改2. dashboard 端口修改3. 登录密码修改 二、常用插件介绍1. 常用转换插件1.1 proxy-rewrite插件1.1.1 属性字段1.1.2 配置示例 2. 常用认证插件2.1 key-auth插件2.1.1 消费者端字段2.1.2 路由端字段2.1.3 配置示例 2.2 basic-auth插…...

Transformer的前世今生 day10(Transformer编码器
前情提要 ResNet(残差网络) 由于我们加更多层,更复杂的模型并不总会改进精度,可能会让模型与真实值越来越远,如下: 我们想要实现,加上一个层把并不会让模型变复杂,即没有它也没关系…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...

UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...