Blogger Information
Blog 63
fans 1
comment 0
visits 76065
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery遍历的常用方法
桃儿的博客
Original
795 people have browsed it

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>

运行实例 »

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



Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post