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>

Answer 2

如果你使用html（），这就是EACH循环的结果：

您可以获得所需的数据
您创建了选项
您更改＆＃34; .filter-select＆＃34;的HTML按当前选项

所以你删除前一个循环。

这是一个其他的解决方案，而不是使用append（）你可以使用我认为：

var option_content = "";  // I create an empty var
$(".categories ul li a").each(function(i){

  option_content += "<option value=." + $(this).text() + ">" + $(this).text() + "</option>";

});

$(".filters-select").html(option_content);

您为每个循环构建数据，然后将其添加到＆＃34; filter-select＆＃34;元件。

希望有所帮助

使用.each（）遍历列表并使用li的文本创建选择选项

2 个答案: