jQuery怎么获取<c:forEach>标签的值

本文介绍了一种使用jQuery的方法,可以在&lt;c:forEach&gt;标签遍历元素时轻松获取每个元素的ID。通过示例展示了如何为遍历生成的表格行添加点击事件,并在点击时弹出当前行的ID。

最近做项目中要获取到<c:forEach>标签遍历出的元素的id,之前都是通过在遍历出的元素中添加onclick()函数,再通过原生的js来触发该函数实现。这次分享以下jQuery的实现。

HTML代码:

<table>
	<tbody>
		<c:forEach items="${map.list }" var="list">
			<tr class="icList" id="${list.icId }">
				<th>${list.icName }</th>
			</tr>
		</c:forEach>
	</tbody>
</table>



jQuery代码:

$(".icList").each(function(){
	$(this).click(function(){
		alert($(this).attr('id'));
	});
});

运行结果:

点击对应的行标签,弹出提示框显示对应元素的id。

<%-- Created by IntelliJ IDEA. User: 19767 Date: 2018/11/19 Time: 15:03 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <title>商品列表</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="layer/layer.js"></script> <script type="text/javascript" src="js/cart.js"></script> </head> <body> <!--header--> <jsp:include page="/header.jsp"> <jsp:param name="flag" value="1"></jsp:param> </jsp:include> <!--banner--> <div class="banner"> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" id="olnum"> <c:forEach items="${scroll}" var="g" varStatus="status"> <c:choose> <c:when test="${status.first}"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> </c:when> <c:otherwise> <li data-target="#carousel-example-generic" data-slide-to="${status.index}"></li> </c:otherwise> </c:choose> </c:forEach> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox" id="lunbotu" style="width: 1242px; height: 432px;"> <c:forEach items="${scroll}" var="g" varStatus="status"> <c:choose> <c:when test="${status.first}"> <div class="item active"> <h2 class="hdng"><a href="/goods_detail?id=${g.id}">${g.name}</a><span></span></h2> <p>今日精选推荐</p> <a class="banner_a" href="javascript:;" onclick="buy(${g.id})">立刻购买</a> <div class="banner-text"> <a href="/goods_detail?id=${g.id}"> <img src="${g.cover}" alt="${g.name}" width="350" height="350"> </a> </div> </div> </c:when> <c:otherwise> <div class="item"> <h2 class="hdng"><a href="/goods_detail?id=${g.id}">${g.name}</a><span></span></h2> <p>今日精选推荐</p> <a class="banner_a" href="javascript:;" onclick="buy(${g.id})">立刻购买</a> <div class="banner-text"> <a href="/goods_detail?id=${g.id}"> <img src="${g.cover}" alt="${g.name}" width="350" height="350"> </a> </div> </div> </c:otherwise> </c:choose> </c:forEach> </div> <!-- Controls --> <%--<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>--%> </div> </div> </div> <!--//banner--> <div class="subscribe2"></div> <!--gallery--> <div class="gallery"> <div class="container"> <div class="alert alert-danger">热销推荐</div> <div class="gallery-grids"> <c:forEach items="${hotList}" var="g"> <div class="col-md-4 gallery-grid glry-two"> <a href="/goods_detail?id=${g.id}"> <img src="${g.cover}" class="img-responsive" alt="${g.name}" width="350" height="350"/> </a> <div class="gallery-info galrr-info-two"> <p> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <a href="/goods_detail?id=${g.id}">查看详情</a> </p> <a class="shop" href="javascript:;" onclick="buy(${g.id})">立刻购买</a> <div class="clearfix"></div> </div> <div class="galy-info"> <p>${g.typeName} > ${g.name}</p> <div class="galry"> <div class="prices"> <h5 class="item_price">¥ ${g.price}</h5> </div> <div class="clearfix"></div> </div> </div> </div> </c:forEach> </div> <div class="clearfix"></div> <div class="alert alert-info">新品推荐</div> <div class="gallery-grids"> <c:forEach items="${newList}" var="g"> <div class="col-md-3 gallery-grid "> <a href="/goods_detail?id=${g.id}"> <img src="${g.cover}" class="img-responsive" alt="${g.name}"/> </a> <div class="gallery-info"> <p> <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> <a href="/goods_detail?id=${g.id}">查看详情</a> </p> <a class="shop" href="javascript:;" onclick="buy(${g.id})">立刻购买</a> <div class="clearfix"></div> </div> <div class="galy-info"> <p>${g.typeName} > ${g.name}</p> <div class="galry"> <div class="prices"> <h5 class="item_price">¥ ${g.price}</h5> </div> <div class="clearfix"></div> </div> </div> </div> </c:forEach> </div> </div> </div> <!--//gallery--> <!--subscribe--> <div class="subscribe"></div> <!--//subscribe--> <!--footer--> <jsp:include page="/footer.jsp"></jsp:include> </body> </html>帮我解决问题
06-11
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值