Utilisation de jQuery pour saisir du contenu

Question

J'essaie d'extraire quelques variables du bloc html suivant. Si cela ne vous dérange pas d'aider, ce serait grandement apprécié!

<div id="services"> 
    <div id="service1"> 
     <div class="left"> 
     <img alt="Service Picture" src="/images/service-picture.jpg" /> 
     <h2 class="serviceHeading">A Beautiful Header</h2> 
     <p>Some nice text.</p> 
     </div> 
     <div class="right"> 
     <p>Some more nice text.</p> 
     </div> 
     <br class="spacer"/> 
     <a class="topButton" href="#" title="Back to Top">Back to Top</a> 
    </div> 
    <div id="service2"> 
     <div class="left"> 
     <img alt="Service Picture" src="/images/service-picture-2.jpg" /> 
     <h2 class="serviceHeading">Another Beautiful Header</h2> 
     <p>Some even nicer text.</p> 
     </div> 
     <div class="right"> 
     <p>Some even more nicer text.</p> 
     </div> 
     <br class="spacer"/> 
     <a class="topButton" href="#" title="Back to Top">Back to Top</a> 
    </div> 
    </div> 

Je voudrais la fonction de traverser à travers #services et obtenir le src valeurs pour chaque img, ainsi que le contenu de chaque <h2>.

C'est ce que j'ai jusqu'à présent ...

$("#services div").each(function() { 
    var $this_html = $(this).html(); 
    var h2_text = ""; 
    var img_src = ""; 
}); 

Answer 1

Cela devrait fonctionner. Il est important d'utiliser le sélecteur #services > div car chaque div de service a une div enfant. Sans le sélecteur d'enfant, vous obtiendrez chaque service deux fois.

$("#services > div").each(function() { 
    var imgSrc= $(this).find('img').attr('src'); 
    var headerContent = $(this).find('h2').text(); 
}); 

Answer 2

un coup d'oeil à la fonction de recherche

http://docs.jquery.com/Traversing/find

au sein de la fonction each vous pouvez trouver ce dont vous avez besoin comme ceci:

$(this).find('h2').text(); 
$(this).find('img').attr('src'); 

Answer 3

Vous êtes proche.

$("#services div").each(function() { 
    var img_src= $(this).find('img').attr('src'); 
    var h2_text = $(this).find('h2').text(); 
}); 

Donnez un coup de feu.

Answer 4

Je pense que vous voulez ceci:

$("#services div.left").each(function() { 
    var $this_html = $(this).html(); // don't know if you still want this 
    var h2_text = $(this).find(">h2").text(); 
    var img_src = $(this).find(">img").attr("src"); 
}); 

• div.left est ajouté de sorte que vous obtenez toujours un div avec les éléments corrects.
• Nous utilisons > dans la fonction find pour récupérer les enfants (plus efficace).
• Supprimez la ligne $this_html si vous n'avez pas besoin de tout le code HTML en plus du format h2/img, ce dernier élément n'en dépend pas.