js和jquery获取当前对象的子元素
开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法。
HTML片断:
<ul class="box">
<li>子元素1</li>
<li>子元素2</li>
<li>子元素3</li>
<li>子元素4</li>
<li>子元素5</li>
</ul>
先说说jquery的解决方案:
//获取li内容
function getLi(obj,index){
var child = obj.children("li").eq(index);
return child.html();
}
$(function(){
var c = 0;
$(".box").click(function(){
if(c == 0){
console.log(getLi($(this),c));
c++;
}else if(c == 1){
console.log(getLi($(this),c));
c++;
}else if(c == 2){
console.log(getLi($(this),c));
c++;
}else if(c == 3){
console.log(getLi($(this),c));
c++;
}else if(c == 4){
console.log(getLi($(this),c));
c = 0;
}
});
});
$("elementName").children();获取当前对象的子元素(集合),若子元素有且只有一个就直接通过children()获取。若子元素有多个children()获取的就是一个集合,获取具体一个子元素就需要eq();获取。
再来看看JavaScript的解决方案:
var c = 0;
var childArr = document.getElementsByClassName("box")[0].getElementsByTagName("li");
document.getElementsByClassName("box")[0].onclick = function(){
if(c == 0){
console.log(childArr[c].innerHTML);
c++;
}else if(c == 1){
console.log(childArr[c].innerHTML);
c++;
}else if(c == 2){
console.log(childArr[c].innerHTML);
c++;
}else if(c == 3){
console.log(childArr[c].innerHTML);
c++;
}else if(c == 4){
console.log(childArr[c].innerHTML);
c = 0;
}
}
JS获取子元素用链式调用,DOM.getElement.._Parent.getElement.._Child;(dom.父元素.子元素)。
小结:个人觉得js的调用方式比jquery方便,通过链式调用便可获取元素子集。
js和jquery获取当前对象的子元素的更多相关文章
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery获取json对象中的key小技巧
jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...
- JS和Jquery获取和修改label的值的示例代码
abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源: < JS和Jquery获取和修改label的值的示例代码 & ...
- jQuery获取带点的id元素
一般jQuery获取某个id为elem元素,只需用$('#elem')就行了,但是如果id中不小心包括了'.' ,那么我吗就会发现这时候jQuery就不能获取到这个元素了.但是使用dom原生的getE ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法
最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){ var a = document.getElementByIdx ...
- JS和jQuery获取节点的兄弟,父级,子级元素
原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...
- 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法
转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...
随机推荐
- Linux 发行版本及其基于
Independent ---> Debian Debian/Ubuntu(LTS) ---> Linux Mint ---> Linux Lite Debian/Ubuntu -- ...
- LeetCode: Ransom Note
public class Solution { public boolean canConstruct(String ransomNote, String magazine) { int[] rans ...
- [转]spring_bean的属性
1.parent 表示继承的父类 如果有很多继承同一个父类的BEAN 那么在配置文件中实例那些BEAN时候可以省略掉父类已经注入的属性 bean定义继承父bean定义,它可以覆盖父bean的一些值,或 ...
- Apache与Tomcat的整合
一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...
- paper 125:NSCT——Nonsubsampled contourlet 变换程序(尺度不变性问题研究)
原文地址:NSCT——Nonsubsampled contourlet 变换程序开发教程1作者:向望大海的鱼 08年,被老板逼得走投无路,xx所得项目看来是实在躲不过去,只好硬着头皮上.开发一款图像处 ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- 基于MDK的mbed工程建立
个人更喜欢mdk作为IDE来编写代码,而mbed作为一个开源项目,有大量优秀代码可以借鉴使用,今后一段时间都会主要看mbed平台的代码以及国内ebox平台代码 1 首先登陆mbed在 ...
- python for MSSQLserver
# -*- coding: utf-8 -*- '''python coded by written in 2016/8/31 Used for get win os log for each win ...
- Core 1.0中publishOptions Include的bug
"publishOptions": { "include": [ "wwwroot", "Views", "A ...
- linux和windows下的自动ftp脚本(shell bat)
一.先来看linux下的: 复制代码 代码如下: #! /bin/bashcd /ftp/CURRENTDATE=` date +%Y%m%d `YESTERDAY=` date -d yesterd ...