5.jQuery遍历，创建，添加，删除元素-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/145709379

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div>
        <li>原住民</li>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    const arr = ["red", "green", "blue", "yellow", "gray", "pink"];
    let sum = 0;
    //1.each()遍历兄弟元素
    $("ul>li").each(function(i, doIt) {
        //当前索引的元素
        console.log(doIt);
        //索引号
        console.log(i);
        $(doIt).css("color", arr[i]);
        sum += parseInt($(doIt).text());
    })
    console.log(sum); //21

    //2.$.each遍历数据,处理数据
    $.each($("ul>li"), function(i, ele) {
        //索引号
        console.log(i);
        //当前索引的元素
        console.log(ele);
    })
    $.each({
        name: "Andy",
        age: 18
    }, function(i, doIt) {
        console.log(i); // name age
        console.log(doIt); // Andy 18
    })

    //3. 创建元素
    const li = $("<li>创建的li</li>");
    const div = $("<div>创建的div</div>");

    //4.添加元素
    //内部添加
    $("div").prepend(li);
    //外部添加
    $("ul").before(div);

    //5.删除元素
    $("ul").remove()
</script>

</html>