Question

I’m using jQuery 1.3.2:

<script src='../../Scripts/jquery-1.3.2.js' type='text/javascript'></script> 

I’ve got the following html:

    <div id='container-div'>         <div id='package_1'>             <div>Package_1</div>             <div id='package-content'></div>         </div>         <div id='package_2'>           <div>Package_2</div>           <div id='package-content'></div>         </div>     </div> 

I’m trying to select all the ‘package-content’ elements with a jQuery selector. I thought i could do the following but it’s not working as expected:

$('#package-content') 

This is only returning the first element in the list – which is what i would expect from getElementById(‘package-content’) but I thought jQuery would return an array of all the elements. What am i missing in my understand of the jQuery selector for div ids?

I wrote the following tests to figure out what was going on but it didn’t help with my understanding other than to prove it was only selecting the first element.

alert($('#container-div').find('#package-content').size()); // = 2 alert($('#package-content').size()); // = 1 alert($('#package-content').parent().attr('id')); // = package_1  $('#package-content').each(function() {     alert('parent: ' + $(this).parent().attr('id') + ' child: ' + $(this).attr('id')); = parent: package_1 child: package-content }); 

Answer 1

id is supposed to be a unique value to identify a particular element. You can’t have two divs with the same one. You could try using a class and $('.package-content') instead.