jQuery - 使用each()方法倒序遍历元素(获取元素、逆序操作)

我们常常使用 each() 方法来遍历匹配的 dom 元素,遍历顺序为从上到下(dom 元素在页面所处的位置)。如果想要反过来倒序遍历,可以先将匹配的元素转成数组并反转,再使用 each() 方法来遍历。

  1. 下面样例自下而上遍历所有的 li 元素,并自动在该元素尾部加上索引值。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>yepk.cn</title>
    <script src="../lib/jquery/jquery-3.3.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {
            $($("li").toArray().reverse()).each(function(index,item){
                var text = $(item).text() + " + " + index;
                $(item).text(text);
            });
        });
    </script>
</head>
<body>
<ul>
    <li>yepk.cn</li>
    <li>yepk.cn</li>
    <li>yepk.cn</li>
</ul>
</body>
</html>
  1. 下面这种写法也是可以的:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>yepk.cn</title>
    <script src="../lib/jquery/jquery-3.3.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function() {
            $($("li").get().reverse()).each(function(index,item){
                var text = $(item).text() + " + " + index;
                $(item).text(text);
            });
        });
    </script>
</head>
<body>
<ul>
    <li>yepk.cn</li>
    <li>yepk.cn</li>
    <li>yepk.cn</li>
</ul>
</body>
</html>

运行结果:

运行结果

# html   code  

评论

企鹅群:39438021

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×