如何获取兄弟元素的innerHTML文本？jQuery代码无法输出span文本如何解决？

错误原因 #

• jQuery ID选择器使用不符合语法规则：通过ID匹配DOM元素时，需要在ID值前添加#前缀。你直接传入checkbox.id（示例中对应值为12DSKT），jQuery会将其识别为标签选择器，尝试查找不存在的<12DSKT>标签，无法匹配到对应的复选框元素，自然获取不到兄弟节点的文本。
• 额外优化点：你已经拿到了checkbox原生DOM实例，不需要通过ID重复查询元素，直接将DOM对象传入jQuery构造函数即可，既简化代码也避免选择器书写错误。

修正代码 #

方案1：补全ID选择器前缀 #

for (var checkbox of checkboxes) {
  if (checkbox.checked) {
    console.log($('#' + checkbox.id).siblings('.ingredient-label').text());
  }
}

方案2（更推荐）：直接复用现有DOM对象 #

for (var checkbox of checkboxes) {
  if (checkbox.checked) {
    console.log($(checkbox).siblings('.ingredient-label').text());
  }
}

可选调整 #

以上代码运行默认会输出Apple (1)，如果你只需要提取Apple文本不需要后面的计数，可以使用以下写法过滤子节点文本：

for (var checkbox of checkboxes) {
  if (checkbox.checked) {
    const labelText = $(checkbox).siblings('.ingredient-label').contents().first().text().trim();
    console.log(labelText);
  }
}

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