当前位置: 首页 > news >正文

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在列表中的下标

基于以前的项目进行修改优化&#xff0c;前端代码根据List元素在html里进行遍历显示 原先的代码&#xff1a; 其中&#xff0c;noticeGuide.Id是标识noticeGuide的唯一值&#xff0c;但是不是从0开始的【是数据库自增字段】 但是在页面初始化加载的时候&#xff0c;我们只想…...

pulsar: 批量接收消息

接收消息时&#xff0c;和kafka类似&#xff0c;如果topic有多个分区&#xff0c;则只能保证分区内数据的接收有序&#xff0c;不能保证全局有序。 一、发送消息 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使用记录

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

区块链食品溯源案例实现(二)

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

RabbitMQ(简单模式)

2种远程服务调用 1openFeign&#xff1a; 优点&#xff1a;能拿到被调用的微服务返回的数据&#xff0c;系统系耦度高&#xff0c;系统稳定。 缺点&#xff1a;同步调用&#xff0c;如果有很多服务需要被调用&#xff0c;耗时长。 MQ,消息队列&#xff0c;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&#xff1a;什么是 Etcd ? Etcd 是 CoreOS 团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法&#xff0c;Etcd基于 Go 语言实现。 名字由来&#xff0c;它源于两个方面&#xff0c;…...

PPT没保存怎么恢复?3个方法(更新版)!

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

DBeaver修改sql语句保存位置

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

LabVIEW2024中文版软件安装包、工具包、安装教程下载

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

对AOP的理解

目录 一、为何需要AOP&#xff1f;1、从实际需求出发2、现有的技术能解决吗&#xff1f;3、AOP可以解决 二、如何实现AOP&#xff1f;1、基本使用2、更推荐的做法2.1 “基本使用”存在的隐患2.2 最佳实践2.2.1 参考Transactional&#xff08;通过AOP实现事务管理&#xff09;2.…...

C 指针数组

C 指针数组是一个数组&#xff0c;其中的每个元素都是指向某种数据类型的指针。 指针数组存储了一组指针&#xff0c;每个指针可以指向不同的数据对象。 指针数组通常用于处理多个数据对象&#xff0c;例如字符串数组或其他复杂数据结构的数组。 让我们来看一个实例&#xf…...

算法系列--动态规划--背包问题(1)--01背包详解

&#x1f495;"趁着年轻,做一些比较cool的事情"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;算法系列–动态规划–背包问题(1)–01背包详解 大家好,今天为大家带来的是算法系列--动态规划--背包问题(1)--01背包详解 一.什么是背包问题 背包问题…...

【KB】通过Karabiner-Elements实现 optionTAB与 commandTAB 对调/映射 win 的 altTAB 习惯

学习Karabiner-Elements的第一个 demo&#xff0c;因为推荐的例子中过多参数&#xff0c;这是一个简化版。 需求&#xff1a;对调 optionTAB与 commandTAB&#xff0c;然后安装 altTAB 软件&#xff0c;恢复win切换任务的使用习惯。 {"description": "Change ta…...

nvm node包管理工具

下载地址&#xff1a;版本 1.1.9 CoreyButler/NVM-Windows (github.com) 使用nvm -v 检查安装是否成功。 常用命令 # 安装nodjs版本 nvm install 10.16.3nvm install 14.15.4# 切换&#xff0c;使用nodejs nvm use 10.16.3 ## nvm use 报错&#xff0c;1).使用管理员打开…...

程序员如何兼职赚小钱?

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

奥比中光深度相机(一):环境配置

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

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&#xff08;残差网络&#xff09; 由于我们加更多层&#xff0c;更复杂的模型并不总会改进精度&#xff0c;可能会让模型与真实值越来越远&#xff0c;如下&#xff1a; 我们想要实现&#xff0c;加上一个层把并不会让模型变复杂&#xff0c;即没有它也没关系…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...

C# winform教程(二)----checkbox

一、作用 提供一个用户选择或者不选的状态&#xff0c;这是一个可以多选的控件。 二、属性 其实功能大差不差&#xff0c;除了特殊的几个外&#xff0c;与button基本相同&#xff0c;所有说几个独有的 checkbox属性 名称内容含义appearance控件外观可以变成按钮形状checkali…...