jQuery .each 中的问题设置 .text

Question

所以我正在尝试将导航栏项目列表动态传递到无序列表中。列表如下（为简洁起见，已缩短）

i = 0
$('#navList li').each(function() {
  i++;
  var name = menu[i].name;
  console.log(menu[i].name);

  $('a').text(name);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav ml-auto" id="navList">
  <div class="hori-selector">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <!-- **LISTITEMS** -->
  <li class="nav-item active">
    <a class="nav-link" id="nav1" href="javascript:void(0);"><i class="far fa-building"></i>Test1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav2" href="javascript:void(0);"><i class="fas fa-quote-right"></i>Test2</a>
  </li>
</ul>

我的两个问题出现在

当我遍历我的菜单项对象时，我可以成功地控制台记录字符串文本，但是 jQuery.text 函数不起作用。
最后，我还想保留包含我的图标的 I 标签。

谢谢！

Answer 1

您需要在 each 循环的当前 li 内找到锚点 - 为此，您可以使用 each 循环参数：

const menu = [{ name : 'test'}, {name:  'test 1'}];

$('#navList li').each(function(index, element) {    // change function to use parameters
  var name = menu[index].name;
  var $anchor = $(element).find('a');               // find the anchor in the current li
  
  $anchor.contents().filter(function() {
    return this.nodeType == 3;
  }).remove();                                      // remove current text
  
  $anchor.append(name);                             // append new text
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav ml-auto" id="navList">
  <div class="hori-selector">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <!-- **LISTITEMS** -->
  <li class="nav-item active">
    <a class="nav-link" id="nav1" href="javascript:void(0);"><i class="far fa-building">icon</i>Test1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="nav2" href="javascript:void(0);"><i class="fas fa-quote-right">icon</i>Test2</a>
  </li>
</ul>

jQuery .each 中的问题设置 .text

Issue setting .text in jQuery .each

javascript

jquery