如何从r.fn.init（jQuery选择器上下文）获取span元素内容？

看起来你在遍历DOM获取span内容时遇到了两个常见的小坑，我来帮你一步步解决：

问题分析 #

首先，你看到的r.fn.init其实就是jQuery返回的元素集合对象，不是原生DOM元素，所以直接用.val()（这是给表单元素用的）或者.get()（返回DOM数组）肯定拿不到想要的值。另外你的点击事件还漏了传递按钮本身的引用，导致函数里的this指向不对。

修正步骤 #

1. 先修复点击事件的参数传递 #

你的按钮onClick调用时没有传this，函数里的this就不是按钮元素，DOM遍历自然出错。先把HTML改成这样：

<tr>
  <td><button type="button" onClick="getValueFromSibling(this)"></button></td>
  <td><span class="childSibbling">100</span></td>
</tr>

2. 正确获取span的内容 #

修正后的函数里，我们先修正DOM遍历路径（按钮的父级是td，它的兄弟是另一个td，要先找到这个兄弟td再找里面的span），然后用三种方式都能拿到内容：

function getValueFromSibling(btn) {
  // 方式1：用jQuery的.text()获取纯文本（最推荐，自动处理转义）
  var textValue = $(btn).parent().siblings('td').find('span.childSibbling').text();
  console.log(textValue); // 输出：100

  // 方式2：用jQuery的.html()获取HTML内容（如果span里有嵌套标签时用）
  var htmlValue = $(btn).parent().siblings('td').find('span.childSibbling').html();
  console.log(htmlValue); // 输出：100

  // 方式3：转成原生DOM元素取innerHTML
  var spanDom = $(btn).parent().siblings('td').find('span.childSibbling')[0];
  var innerHtmlValue = spanDom.innerHTML;
  console.log(innerHtmlValue); // 输出：100
}

补充说明 #

• .val()只适用于表单控件（input、select、textarea等），普通元素的内容要用.text()或.html()
• jQuery对象本质是类数组，你可以用[0]或者.get(0)取到第一个原生DOM元素，然后用原生的innerHTML/textContent属性
• 你的原代码里parent().siblings('span.childSibbling')路径错误，因为parent()是td，它的兄弟是另一个td，不是span，所以要先找兄弟td再找里面的span

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