如何利用jQuery提取HTML中<li>内的标签与对应值？

我来帮你修正这段jQuery代码，实现你想要的提取并格式化选项文本的效果～

首先先指出原代码里的几个问题：

• 多class选择器写法错误：外层div是同时拥有class1、class2、class3，应该用.class1.class2.class3（无空格，用点连接多个class），原写法是后代选择器逻辑，会找class1下的class2元素里的class3元素，完全不符合你的HTML结构。
• class选择器遗漏前缀：找class9的时候漏掉了.，应该写.class9，不然jQuery会把它当成HTML标签名去查找，自然找不到目标元素。
• 文本提取逻辑不对：直接取<li>的文本会把label和值的内容混在一起，需要分别获取每个li内部的<label>和<span class="option">的文本内容。

下面是修正后的完整代码：

$(document).ready(function () {
  var optionTexts = [];
  // 正确选择同时拥有三个class的外层div，再找到目标li元素
  var _selectedOptions = $(".class1.class2.class3").find(".class9").find("li");
  
  _selectedOptions.each(function(i, v){
    // 分别提取label和option的文本，trim去除多余空白
    var elementName = $(this).find("label").text().trim();
    var elementValue = $(this).find(".option").text().trim();
    // 拼接成你需要的格式
    optionTexts.push(`Element : ${elementName.replace(':', '')} Value : ${elementValue}`);
  });
  
  console.log('options: ', optionTexts);
});

代码说明： #

• $(".class1.class2.class3")：正确匹配同时拥有三个class的外层容器div。
• .trim()：去除文本前后的空白字符，避免出现多余的空格影响格式。
• elementName.replace(':', '')：因为你的label文本是Size:这种带冒号的格式，这里去掉冒号让结果更贴合你想要的Element : Size样式，如果想保留冒号，直接用elementName即可。

运行这段代码后，控制台会输出你想要的结果：

options:  ["Element : Size Value : 150", "Element : Color Value : Red"]

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