jquery获取html中当前元素对象,以及父对象,相邻的上一个对象,或下一个对象

简介: jsp代码: 更多英语-其他 英语作文:The Countryside in Summer ...

jsp代码:

复制代码
<span><input type="hidden" value="1" id="newInfo"></input></span> <div class="sx_title"><a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>英语-其他</div> <div class="apps_container"> <ul class="apps_list1_1"> <input type="hidden" value="00070008" id="levelCode" /> <input type="hidden" value="100000001811" id="columId" /> <li><a href="/12580SchoolWap/article/getAritcleContent.do?id=100000031133&menuI=6&columnID=100000001811 &sessionid=F881AFC25986F14FEE1DDA60065C565A&levelCode=00070008"> 英语作文:The Countryside in Summer </a> </li> <input type="hidden" value="00070008" id="levelCode" /> <input type="hidden" value="100000001811" id="columId" /> <li><a href="/12580SchoolWap/article/getAritcleContent.do?id=100000031125&menuI=6&columnID=100000001811 &sessionid=F881AFC25986F14FEE1DDA60065C565A&levelCode=00070008"> 英语作文:I Love Summer </a> </li> </ul> </div>
复制代码

js代码:

复制代码
<script>
 function more(thisObj ){    
     var levelCode=$(thisObj).parent().next().children("ul").children("input").eq(0).val(); var menuI = $("#menuI").val(); var newInfo = $(thisObj).parent().prev().children("input").eq(0).val(); if(newInfo && newInfo=='1'){ menuI=1; } var columId=$(thisObj).parent().next().children("ul").children("input").eq(1).val(); url="/12580SchoolWap/article/getCmsModuleList.do?levelCode="+levelCode+"&columnID="+ columId+"&menuI="+menuI; document.location=url; } </script>
复制代码

js代码解释:

复制代码
当点击 <a href="#" style="cursor: hand" onclick="more(this);" class="fright mr15">更多</a>时, 在js的函数中想要获取隐藏域的值 <input type="hidden" value="00070008" id="levelCode" /> <input type="hidden" value="100000001811" id="columId" /> onclick="more(this);"这里的this 指的是当前dom元素 <a></a>标签 在js的函数function more(thisObj){...}中, 1.$(thisObj)获取<a></a>的jquery对象, 2.$(thisObj).parent(),获取到<a></a>的父对象<div class="sx_title">...</div> 3.$(thisObj).parent().next() 获取到<div class="apps_container">jquery对象 4.$(thisObj).parent().next().children("ul") 获取到<ul class="apps_list1_1">jquery对象 5.$(thisObj).parent().next().children("ul").children("input").eq(0) 获取到<ul class="apps_list1_1">下面的第一个<input>元素:<input type="hidden" value="00070008" id="levelCode" /> 6.$(thisObj).parent().next().children("ul").children("input").eq(0).val(); 获取到<input type="hidden" value="00070008" id="levelCode" />的value值 :00070008 7.$(thisObj).parent().next().children("ul").children("input").eq(1).val(); 获取到<ul class="apps_list1_1">下面的第二个<input>元素, <input type="hidden" value="100000001811" id="columId" />的值:100000001811 8.$(thisObj).parent().prev()获取到<span></span>jquery对象 9.$(thisObj).parent().prev().html()获取到<span></span>的内容<input type="hidden" value="1" id="newInfo"></input> 10.$(thisObj).parent().prev().children("input").eq(0).val()获取 <span></span>下面的第一个<input>的值,其实就一个<input>元素,即:1
复制代码

 

相关文章
|
10月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
283 15
|
6月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
318 19
|
9月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
480 74
|
11月前
|
JavaScript 索引
|
10月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
236 19
|
10月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
310 2
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
359 11
|
JavaScript
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
153 0
jQuery实现的卡片式翻转时钟HTML源码
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。