使用jQuery在子div中选择信息

Question

我是Safaribooksonline.com的一员，我喜欢它。

现在我想保存我图书馆里的书的清单。

如果我查看图书列表的html源代码，我在"main“类中有类似于下面1的div。

我将jQuery加载到浏览器控制台，然后使用books_list = jQuery(".main")选择所有“主”div。这给了我一个像Object { 0: <div.main>, 1: <div.main> ...这样的条目的对象。

我可以迭代这些条目，并提取子信息(书名等)。

从这些主要的div获取子div和子信息的最惯用的方法是什么？理想情况下采用JSON格式。所以我有了{title: "book title", author: "book author", etc}

1个包含图书信息的Divs

<div class="main">
  <span class="cover">
    <a href="/library/view/learning-javascript-design/9781449334840/">
      <span><img src="/library/cover/9781449334840/"></span>
    </a>
  </span>

  <a href="/library/view/learning-javascript-design/9781449334840/" class="next title-block js-bit-title t-bit-link">
    <span class="chapter-title t-bit-title">Learning JavaScript Design Patterns</span>
  </a>
  <span class="book-title">
    <span class="author">by Addy Osmani</span>
    <span class="issued">Released: August 2012</span>
  </span>

  <div class="t-read-link prog-text">
    <a href="/library/view/learning-javascript-design/9781449334840/index.html" class="button position-link t-position-link js-position-book">Start reading now</a>
  </div>

  <div class="book-topics">
    <ul class="topic-display">
  <li><a href="/topics/design-patterns" class="topic t-t-link" data-topic-slug="design-patterns">Design Patterns</a></li>
    </ul>
  </div>
</div>

Answer 1

试试$().each

迭代一个jQuery对象，为每个匹配的元素执行一个函数。

例如：

jQuery(".main").each(function() {
    // do something with each div, access them using $(this)
});