帶有列表和數組的嵌套循環

Question

我有一個html ul li，我需要從中獲取內容並使用位於數組中的其他內容進行更新。到目前爲止，我創建了嵌套循環，但我總是被困在同一點：每個li都得到了4次迭代（我的數組很長4），只顯示我的數組的最後一個元素 我的代碼會更清晰，然後我：

的Html

<div class="menu-sidebar"> 
<ul> 
<li><a>Batman</a></li> 
<li><a>Billo</a></li> 
<li><a>Breaking-</a></li> 
<li><a>Buttons</a></li> 
</ul> 
</div> 

的js

var currentNames = []; 
    var newListName = [ 
    "Hello", 
    "Billo M", 
    "Breaking Hard", 
    "Button" 
    ]; 

    $(".menu-sidebar li a").each(function(index) { 
     var listName = $(this).text().replace(/\s/g,''); 
     currentNames.push(listName); 
    //console.log(currentNames); //["Batman", "Billo", "Breaking-", "Buttons", .. ] 
    //console.log(newListName); //["hello", "Billo M", "Breaking Hard", "Button"] 
    }); 

    for (var j = 0; j < currentNames.length; j++) { 
      var currentName = currentNames[j] 

     for (var i = 0; i < 1; i++) { 
      console.log(currentNames[j]); 
      console.log(newListName[j]); 

      $(".menu-sidebar li a").each(function(index) { 
       $(this).text(newListName[j]); 
      }); 
     } 
    } 

Answer 1

有似乎沒有多大點在列表上做多遍，只有一個會做（如果我正確理解你的描述）

$(".menu-sidebar li a").each(function(index) { 
     $(this).text(newListName[index]) 
}); 

這裏有一個演示：

var newListName = [ 
 
    "Hello", 
 
    "Billo M", 
 
    "Breaking Hard", 
 
    "Button" 
 
    ]; 
 

 
$(".menu-sidebar li a").each(function(index) { 
 
     $(this).text(newListName[index]) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-sidebar"> 
 
<ul> 
 
<li><a>Batman</a></li> 
 
<li><a>Billo</a></li> 
 
<li><a>Breaking-</a></li> 
 
<li><a>Buttons</a></li> 
 
</ul> 
 
</div>