Juery获取标签的子元素，jstl函数的嵌套
Juery获取标签的子元素，jstl函数的嵌套
说明一下juery的一些用法，先看一下下面的页面，是由jsp的代码生产的，
Jsp的代码是这样的
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c"%> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <meta name="MobileOptimized" content="320" /> <meta name="format-detection" content="telephone=no" /> <meta content="中国移动,中移动,全球通,神州行,动感地带" name="keywords" /> <meta content="欢迎您访问中国移动统一门户网站。中国移动通信集团公司，是中国规模最大的移动通信运营商，主要经营移动话音、数据、IP电话和多媒体业务，并具有计算机互联网国际联网单位经营权和国际出入口局业务经营权。" name="description" /> <title>wap网校移动</title> <link href="../css/style.css" rel="stylesheet" type="text/css" /> <script> function more(thisObj ){ var courseId=$(thisObj).parent().next().children("input").val(); url="${pageContext.request.contextPath}/article/getQuestionAnswerList.do?subjectId="+ courseId; document.location=url; } </script> </head> <body> <div class="sx_wrap" id="top"> <%@ include file="/include/head.jsp" %> <div class="sx_title1"><a href="${pageContext.request.contextPath}/article/index.do" title="网校首页">网校首页</a><span style="cursor: default">问题答疑</span></div> <!--最新资讯 开始--> <!--最新资讯 结束--> <!-- list中存放的是map,map中的value是list --> <c:if test="${not empty aritcleList}"> <c:forEach items="${aritcleList}" var="temp"> <c:forEach items="${temp}" var="map"> <div class="sx_title"><a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>${map.key}</div> <c:if test="${not empty map.value}"> <c:forEach items="${map.value}" var="smart" varStatus="status"> <ul class="sx_list_ul"> <input type="hidden" value="${smart['courseId']}" id="courseId" /> <li><span class="ico"></span><a href="${pageContext.request.contextPath}/article/getQuestionAnswers.do?id=${smart['ID']}&columnID=${columnID }&sessionid=${pageContext.session.id}">${smart["questiontile"]}</a></li> </ul> </c:forEach> </c:if> </c:forEach> </c:forEach> </c:if> <div class="tcenter"><a href="#top" title="返回顶部">返回顶部</a></div> </div> <!--底文件 开始--> <%@ include file="/include/foot.jsp" %> <!--底文件 结束--> </body> </html>
这里当点击 更多时，显示的某个课程相关的更多的信息，课程的名称由 map.key来获取，
某个课程的列表信息，由map.value来指定的，是一个list
现在有一个问题，在更多 的地方，课程信息由map.key来指定的，如语文、数学等,当点击更多时，要根据 课程的id，来查询该课程更多的信息， 目前课程的id是放在课程列表中的，通过隐藏域来设定，<input type="hidden" value="${smart['courseId']}" id="courseId" />
课程的列表信息:
[
{ID=ff8080813d23c1c8013de7cc9090000c, QUESTIONTILE=如何记忆语文课文, NAME=语文, COURSEID=1, SENDTIME=2013-04-08 11:59:36.08}, {ID=ff8080813cf79f17013cf7a4c3b30001, QUESTIONTILE=怎么才能更快的提高作文水平, NAME=语文, COURSEID=1, SENDTIME=2013-02-20 20:47:15.89}, {ID=402881f63ad97562013adef28cfd0024, QUESTIONTILE=语文, NAME=语文, COURSEID=1, SENDTIME=2012-11-08 15:36:08.701}
]
当显示某个课程的列表信息时，使用了隐藏域
<c:forEach items="${map.value}" var="smart" varStatus="status">
<ul class="sx_list_ul">
<input type="hidden" value="${smart['courseId']}" id="courseId" />
<li><span class="ico"></span><a href="${pageContext.request.contextPath}/article/getQuestionAnswers.do?id=${smart['ID']}&columnID=${columnID }&sessionid=${pageContext.session.id}">${smart["questiontile"]}</a></li>
</ul>
当点击某个课程的更多时
<a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>
，使用jquery来获取课程的id，
<script>
function more(thisObj ){
var courseId=$(thisObj).parent().next().children("input").val();
url="${pageContext.request.contextPath}/article/getQuestionAnswerList.do?subjectId="+ courseId;
document.location=url;
}
</script>
Jsp页面中onclick="more(this);"中的this，指的是<a></a>
在js中通过$(thisObj) 来获得<a></a>的jquery对象,看下面的代码片段
<div class="sx_title"><a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>${map.key}</div>
<c:if test="${not empty map.value}">
<c:forEach items="${map.value}" var="smart" varStatus="status">
<ul class="sx_list_ul">
<input type="hidden" value="${smart['courseId']}" id="courseId" />
<li><span class="ico"></span><a href="${pageContext.request.contextPath}/article/getQuestionAnswers.do?id=${smart['ID']}&columnID=${columnID }&sessionid=${pageContext.session.id}">${smart["questiontile"]}</a></li>
</ul>
</c:forEach>
</c:if>
由上述的jsp代码得知，
1. 更多所在的<a></a>标签的父标签时<div></div>
$(thisObj) 来获得<a></a>的jquery对象
$(thisObj).parent()获得<div></div>的jquery对象
2. <div></div>下一个相邻的标签元素是<ul></ul>
$(thisObj).parent().next()可以获得<ul></ul>的jquery对象
3. 隐藏域<input type="hidden" value="${smart['courseId']}" id="courseId" /> 是<ul></ul>的子元素
$(thisObj).parent().next().children("input")获得<ul></ul>下面的子元素<input></input>的jquey对象
$(thisObj).parent().next().children("input").val() 获得<input></input>的jquery对象的值,这里是课程的id
这样的js中就可以通过
url="${pageContext.request.contextPath}/article/getQuestionAnswerList.do?subjectId="+ courseId;
document.location=url;
进行页面跳转了
后来又发现了一种解决方法，认为这种方法，还是比较好一点
改进如下：
把课程的名字和id拼接在一起，作为map的key，课程的列表信息不变，仍然作为map的value
//查询课程的名称
Map map = myCmsArticleBPO.getQuestionAnswerNameMap(i+"");
最终掉到的代码是
public Map getQuestionAnswerNameMap(String id){
String sql="select sb.name,sb.id from sc_subject sb where sb.id='"+id+"'";
Map map=jdbcTemplate.queryForMap(sql);
return map;
}
查询课程的列表信息，并保存起来
List coursesList = new ArrayList();
for(int i=1;i<10;i++){
//查询课程的名称
Map map = myCmsArticleBPO.getQuestionAnswerNameMap(i+"");
//查询某课程前几条的数据
List course = myCmsArticleBPO.getQuestionAnswerMap(i+"");
Map courseInfo = new HashMap();
courseInfo.put(map.get("name")+"_"+map.get("ID"),course);
coursesList.add(courseInfo);
}
这样coursesList结果为
[
{物理_3=[{ID=402881f63ad97562013aded03cbf0013, QUESTIONTILE=串联并联电路, NAME=物理, COURSEID=3, SENDTIME=2012-11-08 14:58:39.935}]},
{化学_4=[{ID=402881f63ad97562013adedc47f00017, QUESTIONTILE=相对分子质量, NAME=化学, COURSEID=4, SENDTIME=2012-11-08 15:11:49.232}, {ID=402881f638ffcc0501390f71cdb90004, QUESTIONTILE=语文知识, NAME=化学, COURSEID=4, SENDTIME=2012-08-10 15:31:20.121}]},
{生物_5=[{ID=402881f63ad97562013adf0a244c0028, QUESTIONTILE=植物细胞, NAME=生物, COURSEID=5, SENDTIME=2012-11-08 16:01:54.764}, {ID=402881f63ad97562013adedcb9670019, QUESTIONTILE=生物, NAME=生物, COURSEID=5, SENDTIME=2012-11-08 15:12:18.279}]},
{政治_6=[{ID=402881f63ad97562013adeff64960026, QUESTIONTILE=政治材料分析题, NAME=政治, COURSEID=6, SENDTIME=2012-11-08 15:50:10.326}]}
]
Map的key就是物理_3 , 化学_4, 生物_5, 政治_6
在jsp中想通过解析map.key来获取课程的名字和课程的id，最初使用了函数的嵌套
<div class="sx_title"><a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>${fn:substring(${map.key},'3','4')}</div>
结果悲剧了，
org.apache.el.parser.ParseException: Encountered " <ILLEGAL_CHARACTER> "{ "" at line 1, column 17.
Was expecting one of:
"." ...
")" ...
"[" ...
"," ...
">" ...
"gt" ...
"<" ...
"lt" ...
">=" ...
"ge" ...
"<=" ...
"le" ...
"==" ...
"eq" ...
"!=" ...
"ne" ...
"&&" ...
"and" ...
"||" ...
"or" ...
"*" ...
"+" ...
"-" ...
"/" ...
"div" ...
"%" ...
"mod" ...
显然这样是不可以的，继续改进代码,修改为如下的代码,就ok了
<c:if test="${not empty aritcleList}">
<c:forEach items="${aritcleList}" var="temp">
<c:forEach items="${temp}" var="map">
<div class="sx_title"><a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>${fn:substring(map.key,'0','2')}</div>
<c:if test="${not empty map.value}">
<c:forEach items="${map.value}" var="smart" varStatus="status">
<ul class="sx_list_ul">
<input type="hidden" value="${smart['courseId']}" id="courseId" />
<li><span class="ico"></span><a href="${pageContext.request.contextPath}/article/getQuestionAnswers.do?id=${smart['ID']}&columnID=${columnID }&sessionid=${pageContext.session.id}">${smart["questiontile"]}</a></li>
</ul>
</c:forEach>
</c:if>
</c:forEach>
</c:forEach>
Jstl标签判断某个变量是不是有值，不为空,使用not empty
<c:if test="${not empty list}">
判断某个变量的值，是否等于某个值或者不等于某个值
<c:if test="${order.orderBiaoShi eq '3'}">撤销订单</c:if>
判断某个变量的值，是否不等于某个值
<c:if test="${order.orderBiaoShi ne '3'}">撤销订单</c:if>
多条件联合判断
<c:if test="${order.orderState eq '3'||order.orderState eq '10' }">未发货</c:if>
<c:if test="${order.orderBiaoShi ne '15' && order.orderBiaoShi ne '16' && order.orderBiaoShi ne '17' && order.orderBiaoShi ne '18' && order.orderBiaoShi ne '19' && order.orderBiaoShi ne '20'}">
Jsp页面中引入jstl标签和jstl函数
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
浙公网安备 33010602011771号