JQuery - Using Multiple Variables in a Class Selector

Question

I'm trying to concatenate a class selector using multiple variables that come from user input. I'm getting an empty array as an answer.

The user input is captured from dropdown menus and saved as variables:

var changed1 = $("#dropdown1-ddl option:selected").text();
var changed2 = $("#dropdown2-ddl option:selected").text();

There is a list of results that are shown based on whether the list item has that particular class.

$("ul li").hide();    
$("ul li ."+changed1+"."+changed2).parent().show();

The list is setup so that it pulls all the information off of a database and stores the search terms in classes in div tags below each li tag. Hence the showing of the parent.

<ul>
<li>
    <div class="value1"></div>
    <div class="value2"></div>
</li>
<li>
    <div class="value1"></div>
    <div class="value2"></div>
</li> 
</ul>

The JQuery should search across the div's for all of the div's that match the search terms and show them.

Currently I can pull the user input and save it as variables. I can search on one variable just fine but adding the second keeps giving an empty array (at least that is the result if I just a console.log to output the result of the concatenation.

check the spaces between dots and note that .class.class2 is not .class .class2 neither .class, .class2 — mreq
– mreq, Commented Sep 5, 2011 at 10:29
Changed to .class .class2 and it didn't work. It hid everything and didn't show anything. .class, .class2 shows one OR the other. I need one AND the other. — Josh
– Josh, Commented Sep 6, 2011 at 6:56

GregL · Accepted Answer · 2011-09-07 11:31:45Z

1

Your selector currently says that some child element of an li in a ul must have both classes of whatever changed1 and changed2 are equal to.

But since each div only has one class, you can try the following approach:

$("ul li").has('.' + changed1).filter(':has(.' + changed2 +')').show();

This filters out first li's that have a div inside them with class of the value of changed1, and filters that list (of li's) further for ones that also have a div with a class of the value of changed2, then shows those li's that match both.

I'm not sure it's the most efficient way, but it does work.

Simple jsFiddle I used to test: http://jsfiddle.net/DCqwH/

answered Sep 7, 2011 at 11:31

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GregL Over a year ago

I realised I can even get the jQuery code down to one line by including the .hide() call in that line: $("ul li").hide().has('.' + changed1).filter(':has(.' + changed2 +')').show();. Ah, jQuery, how powerful thy chaining is!

Josh Over a year ago

That worked perfectly. That's why the other answers didn't work, the way I set up my html was weird. Thanks.

Jens Roland · Accepted Answer · 2011-09-06 09:40:30Z

0

Probably you want this:

var changed = ['value1','value2'];

var ul_parent = $("ul"),
    li_selector = $.map(changed,function(value,key){
        return '.'+value;
    }).join(', ');

$(li_selector, ul_parent).each(function(){
    $(this).parent().show();
});

See jsFiddle

If you need to combine multiple selectors, you need to comma-separate them (the join() statement); if your input are just class names, you need to prepend a single . (the $.map() statement); and if you need to restrict the multiple selectors to a specific <ul>, you need to use the two-argument $() selector (the last line).

Update: Added an .each() statement to make sure we are calling .parent() on the correct object.

Combined, they should work for all (non-empty) array inputs.

edited Sep 6, 2011 at 9:40

answered Sep 5, 2011 at 10:40

Jens Roland

27.8k15 gold badges86 silver badges105 bronze badges

4 Comments

Josh Over a year ago

You reversed the function values. It should be function(value, key). However, while that gives an li_selector that is ".value1, .value2" (or "li.value1, li.value2" depending) it still doesn't seem to show anything based on that selector. When I do a console.log of the first part of the last line, I get an empty array.

Jens Roland Over a year ago

Ah, of course - (value,key). I've updated the code now - take a look.

Jens Roland Over a year ago

I've updated the code and added a jsFiddle. I believe it works fully now

Josh Over a year ago

Ok. That helps (after I removed the quotes around my variables making them actual variables and not strings - var changed = [changed1, changed2]; ). Now it searches on changed1 OR changed2. How do I modify it to get AND?

MeLight · Accepted Answer · 2011-09-11 10:54:59Z

0

try using the attribute selector`

$("ul li").hide();
$('ul li[class="' + changed1 + '"][class="' + changed2 + '"]').parent().show();

edited Sep 11, 2011 at 10:54

MeLight

5,5734 gold badges47 silver badges70 bronze badges

answered Sep 5, 2011 at 10:31

Artur Keyan

7,69312 gold badges54 silver badges65 bronze badges

3 Comments

Josh Over a year ago

Gives me an Unexpected Identifier error. I tried adding +'s and another quotation mark (I think you missed one at the end of the selector) and while that doesn't give the error, it doesn't seem to show anything. The line ends up being $("ul li div[class="+changed1+"][class="+changed2+"]").parent().show();

MeLight Over a year ago

You need pluses between the " and the variables

Josh Over a year ago

Thanks for the tips. As per the accepted answer, your answer doesn't work with the way I set up my html. Thanks though.

Collectives™ on Stack Overflow

JQuery - Using Multiple Variables in a Class Selector

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related