javascript - 使用 .each() 迭代列表并使用 li 的文本创建选择选项

Question

我正在尝试迭代列表，获取其项目的文本并创建，然后在选择内，为每个列表项创建一个选项文本，但我只得到最后一个。

$(".categories ul li a").each(function(i){

  console.log($(this).text());

  $(".filters-select").html("<option value=." + $(this).text() + ">" + $(this).text() + "</option>" );
})

为什么控制台日志可以工作并输出我拥有的 4 个项目，但它没有创建 4 个选项标签，而只创建一个？

HTML 结构如下所示:

<li class="categories">Categorías
  <ul>
    <li class="cat-item cat-item-4"><a href="http://localhost:8888/category/novedades/">novedades</a>
</li>
    <li class="cat-item cat-item-2"><a href="http://localhost:8888/category/nueva/">Nueva</a>
</li>
    <li class="cat-item cat-item-5"><a href="http://localhost:8888/category/otros/">Otros</a>
</li>
    <li class="cat-item cat-item-1"><a href="http://localhost:8888/category/sin-categoria/">Sin categoría</a>
</li>
</ul></li>

Answer 1

您应该使用.append()而不是.html()因为每次调用 html 时都会覆盖它。

$(".filters-select").append("<option value=." + $(this).text() + ">" + $(this).text() + "</option>");

演示

$(".categories ul li a").each(function(i) {

  console.log($(this).text());

  $(".filters-select").append("<option value=." + $(this).text() + ">" + $(this).text() + "</option>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="categories">Categorías
  <ul>
    <li class="cat-item cat-item-4"><a href="http://localhost:8888/category/novedades/">novedades</a>
    </li>
    <li class="cat-item cat-item-2"><a href="http://localhost:8888/category/nueva/">Nueva</a>
    </li>
    <li class="cat-item cat-item-5"><a href="http://localhost:8888/category/otros/">Otros</a>
    </li>
    <li class="cat-item cat-item-1"><a href="http://localhost:8888/category/sin-categoria/">Sin categoría</a>
    </li>
  </ul>
</li>

<select class="filters-select"></select>