博客列表 >jQuery遍历的常用方法

jQuery遍历的常用方法

桃儿的博客
桃儿的博客原创
2019年05月27日 12:10:44799浏览

jQuery遍历的常用方法:

最常用的四个方法

find(): 在所有的后代中查找

children(): 仅在子元素中查找

filter(): 在集合中查找到一部分

parent(): 获取父级(只有一个)

同级兄弟

siblings(): 所有兄弟

next(): 后一个兄弟

nextAll(): 后面的所有兄弟

prev(): 前一个兄弟

prevAll(): 前面所有兄弟

常用的快捷方式

$().first(): 选择集合中的第一个

$().last(): 选择集合中的最后一个

$().eq(n): 选择指定索引的对象(0开始)

$().not(selector): 去掉not()中的对象

$().gt(): 大于指定索引的对象

$().lt(): 小于指定索引的对象

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery遍历</title>
</head>
<body>
<ul id="list">
    <li>item1</li>
    <li>item2</li>
    <li>item3
        <ul>
            <li>sub_item1</li>
            <li>sub_item2</li>
            <li>sub_item3</li>
        </ul>
    </li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
    var list=$('#list');
    // .find():获取所有层级,其实就是后代元素
    // list.find('li').css('color','red');
    //.children():只获取子元素,第一级的Li
    // list.children('li').css('color','green');
    //.filter(): 过滤元素
    // list.children('li').filter(':gt(1)').css('background-color','yellow');

    //获取第三个Li
    var li3=$('li').eq(2);
    // li3.next().css('background-color','yellow');
    // li3.nextAll().css('background-color','yellow');

    // li3.prev().css('background-color','yellow');
    // li3.prevAll().css('background-color','yellow');

    // $('li').first().css('background-color','yellow');
    // $('li').eq(0).css('background-color','yellow');
    // $('ul li:first-of-type').css('background-color','yellow');
    // $('#list > li:first-of-type').css('background-color','yellow');

    $('li').not(':eq(0)').css('background-color','blue');
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议