具有相同顺序的两个列表的反向顺序

Question

我有两个相同的<ul>列表，当我按下按钮时，我需要使用jQuery来反转两个列表的顺序。我已经尝试了波纹管代码并且它没有按预期工作。

＆＃13;

＆＃13;

function spin(){
  spinList($('.list-view'));
}

var spinList       = function($el){
       
         var elementClone =  $el.eq(0).clone();
         var allLength    =  elementClone.find('li').length;
         for(var i = 0;i<allLength;i++){
            var element = elementClone.find('li').eq(allLength-i).clone();
            $el.eq(0).find('li').eq(i).replaceWith(element);
            $el.eq(1).find('li').eq(i).replaceWith(element);
         }  
 } 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="spin()">Change order</button>

<ul class="list-view">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
</ul> 

<ul class="list-view">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用原生JavaScript reverse() 方法

function spin() {
  spinList($('.list-view'));
}

var spinList = function($el) {
  $el.each(function() { // iterate over the list
    $(this).append( // appending to change the order
      $('li', this) // get the li element
      .get() // get them as array
      .reverse() // reverse the order
    )
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="spin()">Click</button>

<ul class="list-view">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

<ul class="list-view">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Answer 2

没有jQuery，有一些ES6功能：

function spin() {
  var lists = document.querySelectorAll('.list-view');
  Array.from(lists).forEach((list) => {
    var reversed = Array.from(list.querySelectorAll('li')).reverse();
    list.innerHTML = '';
    var fragment = document.createDocumentFragment();
    reversed.forEach((item) => {
			fragment.appendChild(item);    
    })
    list.appendChild(fragment);
  })
}

<button onclick="spin()">Change order</button>

<ul class="list-view">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
</ul> 

<ul class="list-view">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li>11</li>
   <li>12</li>
</ul>