Использование jQuery для захвата контента - PullRequest
Новая
       6

Использование jQuery для захвата контента

1 голос
/ 19 января 2010

Я пытаюсь получить пару переменных из следующего блока HTML. Если вы не против помочь, это будет с благодарностью! 

<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>

Я бы хотел, чтобы функция проходила через #services и получала значения src для каждого img, а также содержимое от каждого <h2>.

Это то, что я имею до сих пор ... 

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

Ответы [ 4 ]

3 голосов
/ 19 января 2010

Это должно работать. Важно использовать селектор #services > div, потому что у каждого сервисного div есть дочерний div. Без выбора детей вы получите каждую услугу дважды. 

$("#services > div").each(function () {
   var imgSrc= $(this).find('img').attr('src');
   var headerContent = $(this).find('h2').text();
});
2 голосов
/ 19 января 2010

взгляните на функцию поиска

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

внутри каждой функции вы можете найти то, что вам нужно, как это: 

$(this).find('h2').text();
$(this).find('img').attr('src');
1 голос
/ 19 января 2010

Ты рядом. 

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

Дайте этому шанс.

0 голосов
/ 19 января 2010

Я думаю, вы хотите это: 

$("#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 добавлено, так что вы всегда получите div с правильными элементами.
  • Мы используем > в функции find для захвата детей (более эффективно).
  • Удалите строку $this_html, если вам не нужен весь HTML в дополнение к h2 / img, последний материал от этого не зависит.
...