jQuery: sélection d'éléments multiples

Question

J'utilise jQuery 1.3.2:

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

J'ai le code html suivant:

<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> 

Je suis en train de sélectionner tous les « package- contenu "avec un sélecteur jQuery. Je pensais que je pouvais faire ce qui suit, mais il ne fonctionne pas comme prévu:

$('#package-content') 

Cela ne retourne le premier élément dans la liste - qui est ce que j'attendre de getElementById (« package-content ») mais je pensais jQuery retournera un tableau de tous les éléments. Qu'est-ce qui me manque dans ma compréhension du sélecteur jQuery pour les div ids?

J'ai écrit les tests suivants pour comprendre ce qui se passait mais cela n'a pas aidé à ma compréhension autre que de prouver qu'il ne faisait que sélectionner le premier élément.

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 est censé être une valeur unique pour identifier un élément particulier. Vous ne pouvez pas avoir deux divs avec le même. Vous pouvez essayer d'utiliser un classe et $('.package-content') à la place.

Answer 2

id Les attributs sont destinés à être uniques. Essayez de définir l'attribut class sur package-content et remplacez votre sélecteur par .package-content au lieu de #package-content.

Answer 3

make package contenu une classe, vous pouvez toujours avoir id sur ces divs mais il est plus pratique de faire id est 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> 

puis utilisez le sélecteur de classe:

$(".package-content")