Usando jQuery para agarrar contenido
-
21-09-2019 - |
Pregunta
Estoy tratando de tirar de un par de variables a partir de la siguiente bloque de html. Si no le importa ayudar, sería muy apreciado!
<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>
Me gustaría que la función de desplazamiento a través de #services
y obtener el src valores para cada img
, así como la contenido de cada <h2>
.
Esto es lo que tengo hasta ahora ...
$("#services div").each(function () {
var $this_html = $(this).html();
var h2_text = "";
var img_src = "";
});
Solución
Esto debería funcionar. Es importante utilizar el selector de #services > div
ya que cada servicio tiene un div div niño. Sin el selector de hijo obtendrá cada servicio dos veces.
$("#services > div").each(function () {
var imgSrc= $(this).find('img').attr('src');
var headerContent = $(this).find('h2').text();
});
Otros consejos
echar un vistazo a la función de búsqueda
http://docs.jquery.com/Traversing/find
dentro de la función de cada uno se puede encontrar lo que necesita, como esto:
$(this).find('h2').text();
$(this).find('img').attr('src');
Estás cerca.
$("#services div").each(function () {
var img_src= $(this).find('img').attr('src');
var h2_text = $(this).find('h2').text();
});
Dar que un tiro.
Creo que quieres esto:
$("#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");
});
- se añade
div.left
para que siempre obtenga un div con los elementos correctos. - Utilizamos
>
en la funciónfind
para agarrar los niños (más eficiente). - Eliminar la línea
$this_html
si no es necesario todo el HTML, además de la h2 / img, este último material no depende de él.