CODEWITHSUNDEEP
jquery
User1010
User1010

Reputation: 111

Jquery filter list on button click

I have a student portfolio, where every student has a different email address.

My intention is to filter a certain email provider with buttons.

Like the student has an email address from google, i want to filter/show every student who has an email address at google.

My script is working smoothly for the pagination and search function, but there is still an issue with the filter function which causes me some headache.

Here is the main filter function : 

function filterSelection(c) {
var x, i;

hideAll();

var new_results = document.getElementsbyClassName(c);
   new_results.addClass("result");
   displayRange(0, itemTotal);

}

..which is based on the w3schools div hide and show.

I have a button which triggers this function: 

  <button class="btn active" onclick="filterSelection('google')"> Show all</button>

Can someone help me solving this issue?

Here's the link for my codepen: https://codepen.io/user1010/pen/omxqRz?editors=1010

Upvotes: 0

Views: 625

Answers (2)

rodrigot
rodrigot

Reputation: 142

if you gonna interpret the emails and use it as classes as you seem to be doing:

function filterSelection(emailclass){
    if('all') { 
        showAll() 
    } else {
        hideAll()
        $("."+emailclass).closest("li").show()
    }
}

filterSelection('google')

but can spare the trouble of adding the classes altogether...

function filterSelection(emailpart){
    if('all') { 
        showAll() 
    } else {
        hideAll()
        $("span:contains(emailpart)").closest("li").show()
   }
}

filterSelection('@gmail.com')

Upvotes: 0

Vixed
Vixed

Reputation: 3509

addClass() is a jQuery method, so you have to pass through jQuery object. The following should work.

function filterSelection(c) {
    hideAll();
    // Find all elements with the 'c' class: $('.'+c)
    $('.'+c).addClass("result"); 
    displayRange(0, itemTotal);
}

Upvotes: 1

Related Questions