码迷,mamicode.com
首页 > Web开发 > 详细

jQuery使用(十一):jQuery实例遍历与索引

时间:2019-03-06 16:23:20      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:简单的   应该   htm   ack   元素   cti   运行   添加   fun   

  • each()
  • children()
  • index()

 一、jQuery实例遍历方法each()

 jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element。这个方法本身应用非常的简单,所以要来点不简单的东西,请看以下代码:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
//js
//需求一是将每个li的索引值作为文本添加给对应的li
//需求二是将每个li的所以加上“demo”添加给对应的li作为类名
//思路一:
$("li").text(function(){
    //循环获取每个li添加文本
}).addClass(function(){
    //循环获取每个li添加类名
});

思路一的解决方案循环了两次,从上面的需求来看应该是具备一次循环即可解决这两个需求的方案:

$("li").each(function(index,ele){
    $(ele)
        .text(index)
            .addClass(‘demo‘ + index);
});

 二、jQuery实例方法children()

 children方法用来获取元素的直接子元素,这个非常的简单,来个叫demo就好了。

<p>
    <span></span>
    <i></i>
    <span></span>
    <i></i>
    <span></span>
    <li></li>
</p>
//js
//需求是给p元素下的每个子元素添加文本是:tagName- + index
$("p").children().each(function(index, el) {
    if(el.nodeName == "I"){
        $(el).text("i-" + index);
    }else{
        $(el).text("span-" + index);
    }
});

 三、jQuery实例方法index()

 index获取DOM在jQuery对象集合中的索引,非常的简单,但是可以传入参数才是真正的高校操作,比如在上面的HTML结构中,要获取p元素内span或者i是第几个:

$("p").on("click",function(e){
    var par = $(e.target).parent();
    if(e.target.nodeName == "SPAN"){
        alert(par.children(‘span‘).index($(e.target)));
    }else if(e.target.nodeName == "I"){
        alert(par.children(‘i‘).index($(e.target)));
    }
});

jQuery使用(十一):jQuery实例遍历与索引

标签:简单的   应该   htm   ack   元素   cti   运行   添加   fun   

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/10372120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!