同じ順序で同時に2つのリストの逆順

Question

私は2つの同一のリストを持っています。私はボタンを押したときにjQueryを使って2つのリストの順序を逆にする必要があります。期待どおりに動作します。

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); 
 
     } 
 
}

<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>

Answer 1

JavaScriptを使用reverse()ネイティブメソッド一部ES6機能とjQueryをなし

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

、：

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) => { 
 
\t \t \t 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>