Question

Need a little help with what I’m sure is fairly easy jquery

I have the following repeating markup (several list items)

<li>
<div class="answer">
<p><select class="dropdown">
..options..
</select></p>
</div>
<div class="commentBox">
..content..
</div>
</li>

Depending on the value of the selected option when the pages loads, the “commentBox” will be shown/hidden.

I have tried the following jquery

var dd = $('.dropdown');
var com = $('.commentBox');


dd.each(dd, function(n, val){
if($(this).val() == 'whatever'){
   com[n].setStyle('display', 'none');
}
});

I get an error “b.apply is not a function”

So in my head, how it should work – if it’s the first select dropdown, show/hide the first “commentBox” div. If it’s the second dropdown then show/hide the second “commentBox” div. And so on.

I think I have got in a mess trying various jquery techniques so I am sure there are dozens of possibilities here.
Thanks

Answer 1

Your problem is that you’re passing an extra (first) parameter to each.
each only takes the set as the first parameter when called statically.
In other words:

$.each(dd, function() { ... });

or

dd.each(function() { ... });

---

Note that you can make your code clearer by changing it to

$(this).closest('li').find('.commentBox').hide();