jQuery实现列表顺序反转解决方案

- （扫一扫加微信好友）
- （抖音扫一扫，立即关注我）
- 拨打电话：027-81777732

2014年10月30日

jQuery实现列表顺序反转解决方案

切图网（www.qietu.com）：在cctv项目《小七去哪儿》中有个三维的图片切换效果，这种效果会导致一个问题，就是它这个形式必须通过绝对定位来定位，但是这样，最后一张图片就会盖住前面的图片，所以当我们看到这个效果时，第一张看到的其实是最后一张图片，这就需要在做程序的时候，倒叙来插入数据，这样就负负得正了，但是有些cms系统集成了调用规则，不能灵活调用情况下要怎么处理了，只能通过js来反向倒叙一下。需要用到两个函数toArray ，和reverse 。详情如下：

描述： 返回一个包含jQuery对象集合中的所有DOM元素的数组。

.toArray() 返回jQuery集合中所有元素：

alert($('li').toArray());

所有匹配的DOM节点都会包含在一个标准的数组中：

[<li id=”foo”>, <li id=”bar”>]

Example:

选择文档中所有的div，并且返回一个DOM元素数组，然后利用浏览器内置的reverse方法反转整个数组。

<!DOCTYPE html>
<html>
<head>
  <style>
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  Reversed - <span></span>

  <div>One</div>
  <div>Two</div>
  <div>Three</div>
<script>

    function disp(divs) {
      var a = [];
      for (var i = 0; i < divs.length; i++) {
        a.push(divs[i].innerHTML);
      }
      $("span").text(a.join(" "));
    }

    disp( $("div").toArray().reverse() );
</script>

<!--案例2-->
<ul>
    <li>11111111111111111</li>
    <li>22222222222222222</li>
    <li>333333333333333333</li>
    <li>44444444444444444</li>
</ul>
<script>
   $('ul').html($("li").toArray().reverse());
</script>

</body>
</html>
切图网是国内首家致力于web开发的公司，欢迎网站建设公司、设计师等长期外包合作。合作请致电：4000-724-120

标签：jQuery