开发中经常遇到需要获取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获取当前对象的子元素的更多相关文章

  1. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  2. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  3. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jquery获取json对象中的key小技巧

    jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...

  5. JS和Jquery获取和修改label的值的示例代码

    abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源:  <  JS和Jquery获取和修改label的值的示例代码  & ...

  6. jQuery获取带点的id元素

    一般jQuery获取某个id为elem元素,只需用$('#elem')就行了,但是如果id中不小心包括了'.' ,那么我吗就会发现这时候jQuery就不能获取到这个元素了.但是使用dom原生的getE ...

  7. js和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx ...

  8. JS和jQuery获取节点的兄弟,父级,子级元素

    原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...

  9. 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

随机推荐

  1. Linux 发行版本及其基于

    Independent ---> Debian Debian/Ubuntu(LTS) ---> Linux Mint ---> Linux Lite Debian/Ubuntu -- ...

  2. LeetCode: Ransom Note

    public class Solution { public boolean canConstruct(String ransomNote, String magazine) { int[] rans ...

  3. [转]spring_bean的属性

    1.parent 表示继承的父类 如果有很多继承同一个父类的BEAN 那么在配置文件中实例那些BEAN时候可以省略掉父类已经注入的属性 bean定义继承父bean定义,它可以覆盖父bean的一些值,或 ...

  4. Apache与Tomcat的整合

    一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...

  5. paper 125:NSCT——Nonsubsampled contourlet 变换程序(尺度不变性问题研究)

    原文地址:NSCT——Nonsubsampled contourlet 变换程序开发教程1作者:向望大海的鱼 08年,被老板逼得走投无路,xx所得项目看来是实在躲不过去,只好硬着头皮上.开发一款图像处 ...

  6. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  7. 基于MDK的mbed工程建立

    个人更喜欢mdk作为IDE来编写代码,而mbed作为一个开源项目,有大量优秀代码可以借鉴使用,今后一段时间都会主要看mbed平台的代码以及国内ebox平台代码         1  首先登陆mbed在 ...

  8. python for MSSQLserver

    # -*- coding: utf-8 -*- '''python coded by written in 2016/8/31 Used for get win os log for each win ...

  9. Core 1.0中publishOptions Include的bug

    "publishOptions": { "include": [ "wwwroot", "Views", "A ...

  10. linux和windows下的自动ftp脚本(shell bat)

    一.先来看linux下的: 复制代码 代码如下: #! /bin/bashcd /ftp/CURRENTDATE=` date +%Y%m%d `YESTERDAY=` date -d yesterd ...