CODEWITHSUNDEEP
jqueryhtmlcssformsjquery-selectors
Jonny Sooter
Jonny Sooter

Reputation: 2417

Select several elements jQuery

I'm quite new to jQuery so don't jump me if this sounds stupid. I want to know if there is a way to select "#ammountbest2", the "input", and the "textarea" inside it so that I can hide and clear the values inside all at once, with one selector so I don't have to spell out every one. Something like siblings or parents. With that I could just attach at the end: ".val('').css('display', none')"

$('#ammountbest').change(function () {
var ammountbest = ""

$('#ammountbest option:selected').each(function () {
    ammountbest += $(this).text() + "";});


if(ammountbest == "0") {$('#ammountbest1,#ammountbest2').css('display', 'none');}   
if(ammountbest == "1") {
    $('#ammountbest1').css('display', 'block');
    $('#ammountbest2 input,#ammountbest2 textarea').val('');
    $('#ammountbest2').css('display', 'none');
    }
if(ammountbest == "2") {
    $('#ammountbest1,#ammountbest2').css('display', 'block');
    }
})
.trigger('change');



<select id="ammountbest">
    <option>0</option>
    <option>1</option>
    <option>2</option>
</select>

<!-- 1 Winners -->
<div id="ammountbest1" style="display:none;">
<label for="besttitle1" title="Title">Title 01:</label><br>
<input name="besttitle1" id="besttitle1" size="30" type="input">
<label for="bestschool1" title="School">School 01:</label><br>
<input name="bestschool1" id="bestschool1" size="30" type="input">
<label for="bestvideo1" title="Video">Video Embed Code 01:</label><br>
<textarea name="bestvideo1" id="bestvideo1" cols="30" rows="5"></textarea>
</div>

<!-- 2 Winners -->
<div id="ammountbest2" style="display:none;">
<label for="besttitle2" title="Title">Title 02:</label><br>
<input name="besttitle2" id="besttitle2" size="30" type="input">
<label for="bestschool2" title="School">School 02:</label><br>
<input name="bestschool2" id="bestschool2" size="30" type="input">
<label for="bestvideo2" title="Video">Video Embed Code 02:</label><br>
<textarea name="bestvideo2" id="bestvideo2" cols="30" rows="5"></textarea>
</div>

Upvotes: 2

Views: 2795

Answers (4)

David Thomas
David Thomas

Reputation: 253308

The easiest way is simply to specify both objects in one jQuery object:

$('#ammountbest2 input, #ammountbest2 textarea')

You could, of course, use instead:

$('#ammountbest2').children()

Edited in response to the comment from OP:

The reason I don't want the first option is that the code gets huge because I have 7 divs like that filled with inputs and txtarea, which all have to get hidden and cleared at once.

To select multiple elements based on the above posted HTML, assuming the format remains predictable and consistent, I'd recommend:

$('div[id^=ammountbest]').children('input, textarea').val('').andSelf().hide()

(Edited to deliberately mis-spell the word ammount (sic) as per the OP's original question.)

References:

Upvotes: 5

Genosite
Genosite

Reputation: 359

Use class.

<div id="ammountbest1" class="amountbest" style="display:none;">
<div id="ammountbest2" class="amountbest" style="display:none;">

And use jquery selector like this

$('.amountbest');

Good luck !

Upvotes: 2

Hubro
Hubro

Reputation: 59323

You can separate selectors with a ,. That will run each selector separately and gather all the results in the jQuery object. I can see you're already doing that, but you have a trailing comma that may be causing issues:

$('#ammountbest2 input,#ammountbest2 textarea,').val('');
                                             ^ there

You've also missed a closing single quote, plus another trailing comma.

$('#ammountbest2,).css('display', 'none');
                ^ here

Upvotes: 0

Abe Miessler
Abe Miessler

Reputation: 85046

Yes you can specify multiple selectors by comma separating them. Try this:

$("#ammountbest1,#ammountbest1 input,#ammountbest1 textarea")

Upvotes: 0

Related Questions