CODEWITHSUNDEEP
jqueryhtmlcsscss-selectors
anvd
anvd

Reputation: 4047

Question about class in div

If I have this code:

 <div id="one">
        <label>first</label> 
        <select name="area" class="area">
        <option selected="selected">First</option>
    </div>

 <div id="two">
        <label>second</label> 
        <select name="area" class="area">
        <option selected="selected">Second</option>
 </div>

Is it possible something like this?

  $("#one: .area").change(function() {}

or 

 $("#two: .area").change(function() {}

It doesn't work, could someone explain why?

Upvotes: 0

Views: 101

Answers (7)

Jacob Nelson
Jacob Nelson

Reputation: 3016

You can set the div as the scope.

$('.area',$(this).parent('div:one')).change(function() {}

Upvotes: 0

Fermin
Fermin

Reputation: 36111

You have an extra unnecessary : in your selector, use: $("#one .area").change(function() {});

See this for an example: http://jsfiddle.net/fermin/9YM3a/1/

Upvotes: 2

Galled
Galled

Reputation: 4206

Try: 

<div id="one">
        <label>first</label> 
        <select name="area" class="area">
        <option selected="selected">First</option>
         </select>
    </div>

 <div id="two">
        <label>second</label> 
        <select name="area" class="area">
        <option selected="selected">Second</option>
        </select>
 </div>

$("#one select.area").change(function() {}

Upvotes: 4

Caleb Irie
Caleb Irie

Reputation: 358

If you are asking how to select the .area that is the child of #one or #two then you almost have it right.

$('#one > .area').change(function() {}

The > means "The child of" so you will be selecting the .area that is the child of #one

Upvotes: 0

jessegavin
jessegavin

Reputation: 75690

Yes, but you should remove the : in the selector.

$("#one .area").change(function() { alert($(this).val()) });

Upvotes: 2

John Hartsock
John Hartsock

Reputation: 86902

This is probably what you want

$("#one > select.area").change(function() {});

or

$("#two > select.area").change(function() {}

Also Make sure you end your select tag. You have the following HTML

<div id="one">
    <label>first</label> 
    <select name="area" class="area">
    <option selected="selected">First</option>
</div>

It should be

<div id="one">
    <label>first</label> 
    <select name="area" class="area">
        <option selected="selected">First</option>
    </select>  <!-- Note the Ending tag for the select -->
</div>

Upvotes: 3

Detect
Detect

Reputation: 2069

Remove the : in your code... $("#one .area") Also would be good practice to close your select elements </select>

Upvotes: 3

Related Questions