Question

我知道有人问过类似的问题，我读了所有这些问题，但情况却有所不同。

我正在为项目列表构建过滤器。我有三组无序列表形式的下拉列表（它们看起来像带有某些jQuery工作的下拉列表）。下拉列表是将用于过滤产品列表的类别。

当单击下拉列表中的每个项目时，将向该项目添加“选定”类，例如：

<ul class="products-group">
    <li>
        <a href="#" class="selected">Group 1</a>
    </li>
    <li>
        <a href="#">Group 2</a>
    </li>
    <li>
        <a href="#">Group 3</a>
    </li>
    <li>
        <a href="#" class="selected">Group 4</a>
    </li>
    <li>
        <a href="#">Group 5</a>
    </li>
</ul>

在上面的代码中，单击了“组1”和“组4”。单击“过滤器”按钮后，我想以列表格式将所选项目输出为活动过滤器。

所以我创建了一个像这样的容器：

<div id="active-filters"></div>

这是我的jquery：

$('.filter-btn').click(function () {
    var activeFilters = $('.products-group a.selected').text();
    $('#active-filters').html(activeFilters);
});

这有效，但是它将所有选定的项目输出为一长串文本。如何分隔每个选定的项目并将其输出为li列表项目？

我查找了.split（）方法，但区分单词并根据它们之间的间距将它们分开可能不是最好的。例如，第1组是两个词，并且两个词之间有空格，但它是一个项目。

Answer 1

使用.each()遍历所选元素，并为每个元素附加一个<li>。

var list = $("<ul>");
$('.products-group a.selected').each(function() {
    list.append($("<li>", { text: $(this).text() }));
});
$("#active-filters").empty().append(list);

Answer 2

您尝试过追加吗？像这样

$.each(activeFilters, function(index, Group) {
  $('#newlist').append('<li><a href="#">'+Group+'</a></li>')
}

Answer 3

请尝试

     $('.filter-btn').click(function () {
    var activeFilters = $('.products-group>li>a.selected');
    LIST=document.createElement("ul");
    for(i=0;i<activeFilters.length;i++){
    LI=document.createElement("li");
    TXT=$(activeFilters[i]).text();
    $(LI).text(TXT);
    $(LIST).append(LI);
    }
    $('#active-filters').html(LIST);
});

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
 <ul class="products-group">
    <li>
        <a href="#" class="selected">Group 1</a>
    </li>
    <li>
        <a href="#">Group 2</a>
    </li>
    <li>
        <a href="#">Group 3</a>
    </li>
    <li>
        <a href="#" class="selected">Group 4</a>
    </li>
    <li>
        <a href="#">Group 5</a>
    </li>
</ul>
 <div id="active-filters"></div>
 <a href="#" class="filter-btn">CLICK</a>

获取所选项目的文本并将其放在列表中

3 个答案: