Mit jQuery greifen Inhalt
-
21-09-2019 - |
Frage
Ich versuche, ein paar Variablen aus dem folgenden Block von HTML zu ziehen. Wenn Sie nicht helfen, etwas dagegen hätte, wäre es sehr zu schätzen!
<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>
würde ich die Funktion Traverse durch #services
mögen und die src Werte für jede img
erhalten, sowie die Inhalte von jedem <h2>
.
Das ist, was ich habe, so weit ...
$("#services div").each(function () {
var $this_html = $(this).html();
var h2_text = "";
var img_src = "";
});
Lösung
Das sollte funktionieren. Es ist wichtig, die Wähler #services > div
zu verwenden, da jeder Dienst div ein Kind div hat. Ohne die Kindselektor Sie jeden Dienst zweimal erhalten.
$("#services > div").each(function () {
var imgSrc= $(this).find('img').attr('src');
var headerContent = $(this).find('h2').text();
});
Andere Tipps
einen Blick auf die Funktion find
http://docs.jquery.com/Traversing/find
innerhalb der einzelnen Funktionen finden Sie, was Sie dieses mögen muss:
$(this).find('h2').text();
$(this).find('img').attr('src');
Sie sind in der Nähe.
$("#services div").each(function () {
var img_src= $(this).find('img').attr('src');
var h2_text = $(this).find('h2').text();
});
geben, dass ein Schuss.
Ich glaube, Sie wollen diese:
$("#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
wird hinzugefügt, so dass Sie immer ein Div mit den richtigen Elementen erhalten. - Wir verwenden
>
in derfind
Funktion, um die Kinder zu greifen (sehr effizient). - Entfernen Sie die
$this_html
Linie, wenn Sie den gesamten HTML zusätzlich zum h2 / img nicht brauchen, diese Sachen hängt nicht von ihm.