Question

Jquery Selector:

//left side
$('section.abstract label.gcsubheader')
//right side
$('fieldset.abstract label.formElems')

Both Return: (with the class differing, but the for="*" remaining the same)

<label for=​"design" class=​"displayHidden formElems">​Design​</label>​ 
<label for=​"expertise" class=​"displayHidden formElems">​Expertise​</label>​
<label for=​"skills" class=​"displayHidden formElems">​Skills​</label>​
<label for=​"tools" class=​"displayHidden formElems">​Tools​</label>​
<label for=​"projects" class=​"displayHidden formElems">​Projects​</label>​
<label for=​"community" class=​"displayHidden formElems">​Community​</label>​
<label for=​"interests" class=​"displayHidden formElems">​Interests​</label>​

I would like to append to the left selector something similar to the following:

.find($('label[for="' + $(this).text().toLowerCase() + '"]'))

or

var $this = $(this).text().toLowerCase();   //and use the $this in the concatenation:

to accomplish selecting elements with labels for="design" like the selector ($('label[for="design"]')), but by doing it dynamically. The idea is that I am trying refactoring for the first time, and have very many elements, and when I click on one element, I would like to find itself, and the other one that shares its label for string.

I have tried:

$('section.abstract label.gcsubheader').click(function () {
     var $this = $(this).text().toLowerCase();
     //left element - hide
     $('section.abstract label.gcsubheader')..find($('label[for="' + $this + '"]')).show();
     //Right Side - show
     $('fieldset.abstract label.formElems').find($('label[for="' + $this + '"]')).show();
}

and

$('fieldset.abstract label.formElems').find($('label[for="' + $(this).text().toLowerCase() + '"]')).show();

Not sure what I am doing wrong. Do I have to allow for another layer of abstraction to grab/define the element’s text, or is my syntax wrong, or something else off? I am hoping to get this, so I can then toggle both left and right’s .hidden class, providing a very robust refactoring of the code, maybe something like this?:

$('label[for="*"]').click(function () {
   // for each .toggleClass('hidden'); 
}

although not quite sure how to write the * or for each for that either, but I will get there. You help is greatly appreciated.

Answer 1

You have an extra . before your first find() call, as well as an unclosed string literal being passed as an argument to it. Note the closing brackets for both the inside function and the click method. You were also using .show() for the left element when you probably wanted .hide().

Additionally, it’s perfectly fine to append the attribute equals selector to your original selector statement like this (I didn’t have your full html so the selector may need to be tweaked a little bit):

$('section.abstract label.gcsubheader').click(function () {
    var $this = $(this).text().toLowerCase();

    //left element - hide
    $('section.abstract label.gcsubheader[for="' + $this + '"]').hide();

    //Right Side - show
    $('fieldset.abstract label.formElems[for="' + $this + '"]').show();
});

As for binding to any of your labels, consider using the has-attribute selector instead of for='*':

$('label[for]').click( /* ... */ );