使用 jQuery 抓取内容答案

【问题标题】：Using jQuery to Grab Content使用 jQuery 抓取内容
【发布时间】：2010-01-19 16:16:30
【问题描述】：

我正在尝试从以下 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 并获取每个img 的src 值，以及每个<h2> 的内容 .

这就是我目前所拥有的......

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

【问题讨论】：

标签： jquery foreach html-content-extraction

【解决方案1】：

这应该可行。使用选择器#services > div 很重要，因为每个服务 div 都有一个子 div。如果没有子选择器，您将获得每个服务两次。

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

【讨论】：

【解决方案2】：

看看find函数

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

在每个函数中，您可以像这样找到您需要的内容：

$(this).find('h2').text();
$(this).find('img').attr('src');

【讨论】：

【解决方案3】：

你已经接近了。

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

试一试。

【讨论】：

【解决方案4】：

我想你想要这个：

$("#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 函数中使用> 来抓取孩子（更高效）。
如果除了 h2/img 之外不需要整个 HTML，则删除 $this_html 行，后者不依赖于它。

【讨论】：