Usando jQuery para capturar conteúdo
-
21-09-2019 - |
Pergunta
Estou tentando extrair algumas variáveis do seguinte bloco de HTML.Se você não se importasse de ajudar, ficaria muito grato!
<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>
Eu gostaria que a função percorresse #services
e obter o fonte valores para cada img
, assim como o contente de cada <h2>
.
Isto é o que tenho até agora...
$("#services div").each(function () {
var $this_html = $(this).html();
var h2_text = "";
var img_src = "";
});
Solução
Isso deve funcionar.É importante usar o seletor #services > div
porque cada div de serviço tem uma div filha.Sem o seletor filho você receberá cada serviço duas vezes.
$("#services > div").each(function () {
var imgSrc= $(this).find('img').attr('src');
var headerContent = $(this).find('h2').text();
});
Outras dicas
dê uma olhada na função find
http://docs.jquery.com/Traversing/find
dentro de cada função você pode encontrar o que precisa assim:
$(this).find('h2').text();
$(this).find('img').attr('src');
Você está perto.
$("#services div").each(function () {
var img_src= $(this).find('img').attr('src');
var h2_text = $(this).find('h2').text();
});
Experimente.
Acho que você quer isso:
$("#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
é adicionado para que você sempre obtenha um div com os elementos corretos.- Nós usamos
>
nofind
função para agarrar as crianças (mais eficiente). - Remova o
$this_html
linha se você não precisar de todo o HTML além do h2/img, o último material não depende disso.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow