问题在 jQuery .each 中设置 .text

光纤耶稣

所以我试图将导航栏项目列表动态传递到无序列表中。列表如下（为简洁而缩短）。

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 标记。

谢谢！

皮特

您需要li在每个循环的电流内找到锚点 - 为此，您可以使用每个循环参数：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。