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

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

打印出＃34;标题3＆＃34;。我只是无法弄清楚如何从之前的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

Cheerio没有正确穿越？

1 个答案: