使用 cheerio 查找和替换某些属性

Question

我有一个 html 与此类似的片段

<div class="form-row">
  <input type="text" id="foo1">
</div>
<div class="form-row">
 <input type="text" id="foo2">
</div>
<div class="form-row">
  <input type="text" id="foo3">
</div>

并且我想使用 cheerio 将 id 标签更改为 foobar[1,2,3]

我的密码是

 var cheerio = require("cheerio");
 var $ = cheerio.load("html as above");

 var inputs = $('input[id]');

 Object.keys(inputs).forEach(function(key,index) {
   if (key == index) {
     console.log(key,inputs[key])
     //#1
 });

此时 (//#1)，我想获取 id 属性的值，根据 https://github.com/cheeriojs/cheerio 的文档，我可以使用 .data 方法获取和更改该属性在元素中，但是

inputs[key].data("id")

给我一个 "TypeError: undefined is not a function" 错误

我知道我遗漏了一些简单的东西，但是只见树木不见森林，希望得到一些指点。

谢谢

更新 #1

就在我认为我已经掌握了它的时候，它从我的手指上滑落了..

现在，我想移动一个元素:

我有

<label>xyz<i class="fa fa-list"></i></label>

我想要

<label>xyz</label><i class="fa fa-list"></i>

代码 - 不起作用 ;) - 是这个

var icons = $('label i');

icons.each(function(index,icon) {
  // #2 now that I've got an element what now ?
}

我知道 icons.remove() 会删除元素，但很难将它们添加到正确的位置。

Answer 1

问题是 inputs[key]) 将是一个 dom 元素引用，它不会有像 data()

这样的方法

尝试将属性值设置为

var cheerio = require("cheerio");
var $ = cheerio.load('<div class="form-row">\
  <input type="text" id="foo1">\
</div>\
<div class="form-row">\
 <input type="text" id="foo2">\
</div>\
<div class="form-row">\
  <input type="text" id="foo3">\
</div>');

var inputs = $('input[id]');

inputs.attr('id', function(i, id){
    return id.replace('foo', 'foobar')
});

console.log($.html())

使用 cheerio 查找和替换某些属性

find and replace certain attributes using cheerio

javascript

html-parsing

cheerio