javascript - 使用循环到 DOM 的列表项获取逗号？

Question

嘿，大家搜索了很多关于我的这个特定问题的信息，该问题在使用 dom 的 map 函数循环项目后打印出逗号。我尝试了替换、连接、切片、gsub，但似乎没有什么对我有用。

这是元素的数据。

let recipesData = [
  {
   "recipeName": 'Pumpkin Pie',
    "ingredients": ['Pumpkin Puree', 'Sweetened Condensed Milk', 'Eggs', 'Pumpkin Pie Spice', 'Pie Crust']
  },
  {
   "recipeName": 'Apple Pie',
    "ingredients": ['Apple Puree', 'Sweetened Creamy Milk', 'Eggs', 'Apple Pie Spice', 'Pie Crust']
  },
  {
   "recipeName": 'Milk Shake',
    "ingredients": ['Dried Fruits', 'Creamy Milk', 'Fruits', 'Muscile Suppliment']
  }
];

这是循环函数:

const displayListItems = items => items.map(item =>  `<li class="collection-item">${item.replace(/,/g , "")}</li>`);

const displayRecipes = recipes => {
  const displayIt = recipes.map(recipe => {
    return `<li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>${recipe.recipeName}</div>
      <div class="collapsible-body list-items">
        <ul class="collection with-header">
          <li class="collection-header"><h4>Ingredients</h4></li>
          ${displayListItems(recipe.ingredients)}
        </ul>
        <a class="waves-effect waves-light btn delete">Delete</a>
        <a class="waves-effect waves-light btn default edit-item" href="#model2">Edit</a>
      </div>
    </li>`
  });
  $('.data-here').html(displayIt);
};

最后，我将 RecipeData 传递给 displayRecipes 函数:

displayRecipes(recipesData);

这是循环遍历数据中的一个对象后的结果。

<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>Pumpkin Pie</div>
<div class="collapsible-body list-items">
  <ul class="collection with-header">
    <li class="collection-header"><h4>Ingredients</h4></li>
    <li class="collection-item">Pumpkin Puree</li>,<li class="collection-item">Sweetened Condensed Milk</li>,<li class="collection-item">Eggs</li>,<li class="collection-item">Pumpkin Pie Spice</li>,<li class="collection-item">Pie Crust</li>
  </ul>
  <a class="waves-effect waves-light btn delete">Delete</a>
  <a class="waves-effect waves-light btn default edit-item" href="#model2">Edit</a>
</div>
</li>

你会在每个后面看到这些逗号，这些是我的问题。

如果有人提供帮助，非常感谢。

Answer 1

试试这个功能:

function displayListItems(item) {
var ret = '';
$.each(item,function(i,v){
ret+='<li class="collection-item">'+v+'</li>'
})
return ret;
};