使用Cheerio或原生JS根据span内容获取父级li的id及data-nume值

原生Vanilla JS实现 #

实现逻辑为遍历匹配类名title的span元素，找到内容为TV的节点后读取其父级li的对应属性：

// 获取所有class为title的span元素
const titleSpans = document.querySelectorAll('span.title');
let targetLi = null;

for (const span of titleSpans) {
  // 修剪首尾空格后匹配文本，避免空白字符影响匹配结果
  if (span.textContent.trim() === 'TV') {
    targetLi = span.parentElement;
    break;
  }
}

if (targetLi) {
  const liId = targetLi.id; // 返回值为option-2
  const dataNume = targetLi.dataset.nume; // 返回值为2
  // 可按需返回对应变量
  console.log('li的id：', liId, 'data-nume值：', dataNume);
}

Cheerio实现 #

先加载抓取到的HTML内容，再通过选择器定位目标节点即可：

const cheerio = require('cheerio');
// 传入你抓取得到的HTML字符串
const $ = cheerio.load(`<div>
    <ul id="options">
        <li id="option-1" data-nume="1">
            <span class="title">Book</span>
            <span class="site">fnac.com</span>
        </li>
        <li id="option-2" data-nume="2">
            <span class="title">TV</span>
            <span class="site">youtube.com</span>
        </li>
    </ul>
</div>`);

// 基础写法：用contains选择器匹配文本
const $targetLi = $('span.title:contains("TV")').parent('li');
// 严格匹配写法（推荐，避免匹配到包含TV的其他文本，比如"TV显示器"这类内容）
// const $targetLi = $('span.title').filter((_, el) => $(el).text().trim() === 'TV').parent('li');

const liId = $targetLi.attr('id'); // 返回值为option-2
const dataNume = $targetLi.data('nume'); // 返回值为2
console.log('li的id：', liId, 'data-nume值：', dataNume);

内容的提问来源于stack exchange，提问作者Pronicio