jQuery 从 href link 中提取 html

Question

这个 Meteor 服务器端使用 Cheerio 来从

中提取 98771

<li><a href="http://www.postcodes-california.com/postcodes/98771" title="Postcode 98771, California">98771</a>

恰好是数组 postcodesLinks 中的 link 数字 33。

我只想获取页面上所有 post 代码的列表，以便将它们保存到 mongodb 集合中。

let $ = cheerio.load(response.content);
let postcodeLinks = $('a[title^=Postcode]');
console.log(postcodeLinks.length); // <----- this works fine
console.log(postcodeLinks[33].html()); // <----- this fails
console.log(postcodeLinks[33].text()); // <----- this fails

Answer 1

jQuery .html() 期望得到一个 jQuery 对象，所以你需要：将 postcodeLinks[33] 包装成 $() 就像：

$(postcodeLinks[33]).html()

let postcodeLinks = $('a[title^=Postcode]');
console.log(postcodeLinks.length); // <----- this works fine
console.log($(postcodeLinks[33]).html()); // <----- this works fine

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="http://www.postcodes-california.com/postcodes/98771" title="Postcode 98771, California">98771</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98772" title="Postcode 98772, California">98772</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98773" title="Postcode 98773, California">98773</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98774" title="Postcode 98774, California">98774</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98775" title="Postcode 98775, California">98775</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98776" title="Postcode 98776, California">98776</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98777" title="Postcode 98777, California">98777</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98778" title="Postcode 98778, California">98778</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98779" title="Postcode 98779, California">98779</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98780" title="Postcode 98780, California">98780</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98781" title="Postcode 98781, California">98781</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98782" title="Postcode 98782, California">98782</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98783" title="Postcode 98783, California">98783</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98784" title="Postcode 98784, California">98784</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98785" title="Postcode 98785, California">98785</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98786" title="Postcode 98786, California">98786</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98787" title="Postcode 98787, California">98787</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98788" title="Postcode 98788, California">98788</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98789" title="Postcode 98789, California">98789</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98790" title="Postcode 98790, California">98790</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98791" title="Postcode 98791, California">98791</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98792" title="Postcode 98792, California">98792</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98793" title="Postcode 98793, California">98793</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98794" title="Postcode 98794, California">98794</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98795" title="Postcode 98795, California">98795</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98796" title="Postcode 98796, California">98796</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98797" title="Postcode 98797, California">98797</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98798" title="Postcode 98798, California">98798</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98799" title="Postcode 98799, California">98799</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98800" title="Postcode 98800, California">98800</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98801" title="Postcode 98801, California">98801</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98802" title="Postcode 98802, California">98802</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98803" title="Postcode 98803, California">98803</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98804" title="Postcode 98804, California">98804</a></li>
    <li><a href="http://www.postcodes-california.com/postcodes/98805" title="Postcode 98805, California">98805</a></li>
</ul>

在没有 jQuery 的情况下做同样的事情看起来更符合您的预期：

let postcodeLinks = document.querySelectorAll('a[title^=Postcode]');
console.log(postcodeLinks.length); // <----- this works fine
console.log(postcodeLinks[33].innerHTML); // <----- this works fine

<ul>
      <li><a href="http://www.postcodes-california.com/postcodes/98771" title="Postcode 98771, California">98771</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98772" title="Postcode 98772, California">98772</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98773" title="Postcode 98773, California">98773</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98774" title="Postcode 98774, California">98774</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98775" title="Postcode 98775, California">98775</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98776" title="Postcode 98776, California">98776</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98777" title="Postcode 98777, California">98777</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98778" title="Postcode 98778, California">98778</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98779" title="Postcode 98779, California">98779</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98780" title="Postcode 98780, California">98780</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98781" title="Postcode 98781, California">98781</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98782" title="Postcode 98782, California">98782</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98783" title="Postcode 98783, California">98783</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98784" title="Postcode 98784, California">98784</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98785" title="Postcode 98785, California">98785</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98786" title="Postcode 98786, California">98786</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98787" title="Postcode 98787, California">98787</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98788" title="Postcode 98788, California">98788</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98789" title="Postcode 98789, California">98789</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98790" title="Postcode 98790, California">98790</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98791" title="Postcode 98791, California">98791</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98792" title="Postcode 98792, California">98792</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98793" title="Postcode 98793, California">98793</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98794" title="Postcode 98794, California">98794</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98795" title="Postcode 98795, California">98795</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98796" title="Postcode 98796, California">98796</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98797" title="Postcode 98797, California">98797</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98798" title="Postcode 98798, California">98798</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98799" title="Postcode 98799, California">98799</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98800" title="Postcode 98800, California">98800</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98801" title="Postcode 98801, California">98801</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98802" title="Postcode 98802, California">98802</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98803" title="Postcode 98803, California">98803</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98804" title="Postcode 98804, California">98804</a></li>
      <li><a href="http://www.postcodes-california.com/postcodes/98805" title="Postcode 98805, California">98805</a></li>
  </ul>

Answer 2

_{Cheerio 基于 jQuery，所以我将在这个答案中使用 Cheerio/jQuery 可互换，因为核心概念是相同的...}

当你使用像 $('a[title^=Postcode]') 这样的 jQuery 选择器时，jQuery object is returned, which is essentially an array-like collection of DOM elements.

您正在通过 postcodeLinks[33] 的索引访问集合中的元素之一，这意味着您正在尝试使用 jQuery 方法 .html() 和 .text() 在原生 DOM 元素上。由于 jQuery 方法未在本机 HTML 元素上实现，因此它不起作用。

因此您需要在 jQuery 对象上使用 .html()/.text() 方法。

一种选择是使用 .eq() method（在 jQuery 和 Cheerio 中都实现了）。在这样做时，.eq() 方法将通过其索引访问一个元素，并且 return 一个 jQuery 对象：

postcodeLinks.eq(33).html()
// or..
postcodeLinks.eq(33).text()

或者，您也可以用 $() 包装 DOM 元素，以便将其转换回 jQuery 对象：

$(postcodeLinks[33]).html()
// or..
$(postcodeLinks[33]).text()

jQuery 从 href link 中提取 html

jQuery to extract html from href link

jquery

cheerio