jQuery: Multiple element selection

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
});

Chad Birch · Accepted Answer · 2009-03-18 17:41:26Z

9

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.

answered Mar 18, 2009 at 17:41

Chad Birch

75k24 gold badges156 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rick Hochstetler Over a year ago

I misread the jQuery docs on this one - docs.jquery.com/Selectors/id#id - clearly states it only selects one #id.

Jon Erickson · Accepted Answer · 2009-03-18 17:43:45Z

2

make package-content a class, you can still have id's on those divs but it is best-practice to make id's unique

<div id="container-div">
    <div id="package_1">
        <div>Package_1</div>
        <div id="pc1" class="package-content"></div>
    </div>
    <div id="package_2">
      <div>Package_2</div>
      <div id="pc2" class="package-content"></div>
    </div>
</div>

then use the class selector:

$(".package-content")

answered Mar 18, 2009 at 17:43

Jon Erickson

115k45 gold badges140 silver badges178 bronze badges

Comments

Ken Browning · Accepted Answer · 2009-03-18 17:42:03Z

0

id attributes are intended to be unique. Try setting the class attribute to package-content and change your selector to .package-content instead of #package-content.

answered Mar 18, 2009 at 17:42

Ken Browning

29.1k6 gold badges58 silver badges68 bronze badges

Collectives™ on Stack Overflow

jQuery: Multiple element selection

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related