Question

Possible Duplicate:
jQuery multiple class selector

I have an input field ‘#q’ where a user can type a search query and returns a set of list items whose classes match it.

function queryData() {
   q = $('#q').val();
   q = q.toLowerCase();
   var qs = q.split(' ');
   $('.item').fadeOut(300);
   for (n in qs)        {
   $("li[class*='" + qs[n] + "']").fadeIn(1000);
                }
} 
<li class="apple"></li> <li class="apple banana"></li> <li class="banana"></li>

I’m not an expert so the code above may appear crude. So far, the code above is only able to display li’s whose classes match the query regardless of the number of words in the query. So, if I type in “apple banana”, any li with apple or banana as class will fadeIn(). How do I edit this function so that only the li’s with BOTH apple and banana in its class will fadeIn()?

Answer 1

How can I select an element with multiple classes?

Try this too:

function queryData() {
    $(‘.item’).fadeOut(300);
    $(“li.”+
     (
      $(‘#q’)
      .val()
      .toLowerCase()
      .split(/\s+/)
      .join(‘.’)
     )
    ).fadeIn(1000);
}