En utilisant jQuery pour récupérer le contenu
-
21-09-2019 - |
Question
Je suis en train de tirer un couple de variables à partir du bloc de code HTML suivant. Si vous ne me dérangerait pas d'aider, il 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>
.
est ce que j'ai jusqu'à présent ...
$("#services div").each(function () {
var $this_html = $(this).html();
var h2_text = "";
var img_src = "";
});
La solution
Cela devrait fonctionner. Il est important d'utiliser le sélecteur #services > div
parce que chaque div service a un enfant div. 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();
});
Autres conseils
jetez un oeil à la fonction de recherche
http://docs.jquery.com/Traversing/find
dans la fonction de chaque vous pouvez trouver ce dont vous avez besoin comme ceci:
$(this).find('h2').text();
$(this).find('img').attr('src');
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.
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 fonctionfind
pour saisir les enfants (plus efficaces). - Retirez la ligne
$this_html
si vous n'avez pas besoin tout le HTML en plus du h2 / img, ce dernier ne dépend pas des choses là-dessus.