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

2018-11-29 发布：hangge 阅读：10182

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

（1）下面样例自下而上遍历所有的 li 元素，并自动在该元素尾部加上索引值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="jquery-3.1.1.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>hangge.com</li>
      <li>hangge.com</li>
      <li>hangge.com</li>
    </ul>
  </body>
</html>

（2）下面这种写法也是可以的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="jquery-3.1.1.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>hangge.com</li>
      <li>hangge.com</li>
      <li>hangge.com</li>
    </ul>
  </body>
</html>

（3）运行结果如下：