CODEWITHSUNDEEP
jquery
hnnnng
hnnnng

Reputation: 495

Get the selected item's text and put them in a list

I know there are similar questions asked, I read all of those and my scenario is different.

I am building a Filter for a list of items. I have three sets of drop-downs in form of unordered lists (they look like drop-downs with some jQuery work). The drop-downs are the Categories that will be used for filtering the list of products.

when each item in the drop-down is clicked, a class 'selected' is being added to the item, here's an example:

<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>

in the above code, 'Group 1' and 'Group 4' are clicked (selected). When the Filter button is clicked, I want to output the selected items as Active Filters in a list format.

So I created a container like this:

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

and this is my jquery:

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

This works but it outputs all selected items as a long string of text. How do I separate each selected item and output them as li list item?

I looked up the .split() method but differentiating the words and separating them based on the space between them might not be the best. For example, Group 1 is two words and there's space between them but it is a single item.

Upvotes: 0

Views: 39

Answers (3)

Barmar
Barmar

Reputation: 780889

Use .each() to loop through the selected elements and append an <li> for each.

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

Upvotes: 1

khalid J-A
khalid J-A

Reputation: 614

TRY THIS

     $('.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>

Upvotes: 0

Christa
Christa

Reputation: 61

Have you tried appending? Something like this

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

Upvotes: 0

Related Questions