1

我有以下代码：

var cheerio = require('cheerio');
var html = "<div> <h3>Header 1</h3> <h3>Header 2</h3></div> <h3>Header 3</h3>";
var $ = cheerio.load(html);

console.log($('h3').length); // 3

var input = $('h3').first();

console.log(input.text()); // Header 1

input = input.next();

console.log(input.text()); // Header 2

input = input.next();

console.log(input.length); // 0
console.log(input.text()); // ''

当然，HTML 代码不是西方最好的，但我想知道为什么长度打印正确，前两个 H3 块打印正确，然后当我为第三个标题调用 next() 时，它没有存在。但是，如果我

console.log($('h3').last().text())

它打印出“标题3”。我只是不知道如何从以前的 h3 遍历到它。

希望这是有道理的，但我不知道这是否是设计的cheerio，或者它是否行为不端。如果有人可以向我解释为什么这段代码不能按我的预期工作，我将不胜感激。

4

1 回答 1

2

第一次调用next有效，因为您正在抓取第一个h3元素（从而将您的项目集合限制为 1 个元素），并寻找兄弟h3。第二个调用是未定义的，因为Header 2没有额外的兄弟h3。

<div> 
  <!-- siblings, yay! -->
  <h3>Header 1</h3> <!-- var input = $('h3').first(); -->
  <h3>Header 2</h3> <!-- input.next() -->
</div> 

<!-- all alone :( -->
<h3>Header 3</h3>

如果要对所有h3元素执行操作，请使用 jQuery 的集合方法：

var inputs = $('h3');

inputs.each(function () {
  console.log($(this).text());
});

// Header 1
// Header 2
// Header 3

console.log(inputs.eq(1).text());
// Header 2
console.log(inputs.eq(0).text());
// Header 1
于 2014-07-19T18:43:30.820 回答