javascript - Cheerio 没有正确遍历？

Question

我有以下代码:

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 block 打印正确，然后当我为第三个标题调用 next() 时，它不存在。但是，如果我

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

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

希望这是有道理的，但我无法判断这是 cheerio 的设计，还是行为不当。如果有人可以向我解释为什么这段代码无法按我的预期运行，我将不胜感激。

Answer 1

第一次调用 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