如何从 r.fn.init（JQuery 选择器上下文）中获取值答案

【问题标题】：How to get value from r.fn.init (JQuery selector context)如何从 r.fn.init（JQuery 选择器上下文）中获取值
【发布时间】：2018-01-05 08:57:53
【问题描述】：

您好，我尝试从如下表中的 span 接收值：

function getValueFromSibling(this) {
    var id = $(this).parent().siblings('span.childSibbling');
}

表格如下：

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

但我收到这样的信息：

id = r.fn.init [prevObject: r.fn.init(1)]

我发现这是一种简单的形式：

var jQuery = function( selector, context ){
   return new jQuery.fn.init( selector, context );
};

那么问题来了。如何从<span> 接收InnerHTML，或者如何将r.fn.init [prevObject: r.fn.init(1)] 转换为价值？

var result = id.val(); 和 var result = id.get(); 不起作用

【问题讨论】：

试试$('span.sibbling').html()?
不幸的是它给出了 undefined
你不想要兄弟姐妹，你想要兄弟姐妹的孩子。
是错误的命名。

标签： javascript jquery

【解决方案1】：

您应该可以使用

获取文本值

$("selector").text();

【讨论】：

你无法想象这对我有多大帮助

【解决方案2】：

首先，函数内部的this getValueFromSibling 在窗口范围内，调用函数时传递this 上下文

 onClick="getValueFromSibling(this)"

很少有像text() 这样的东西可以得到你想要的文本。试试下面的一个

更好的方式（其实是推荐的方式）：

HTML

<tr>
    <td>
      <button type="button" class="some-button"></button>
    </td>
    <td>
      <span class="sibbling">100</span>
    </td>
</tr>

jQuery

$(function(){
  $('.some-button').click(function(){
      var id = $(this).closest('tr').find('.sibbling').text();
          // .closest() gets the closest tr parent .
          // .find() finds the element with class 'sibbling' inside that `tr`
          // .text() gets the text inside the element.
  });
});

【讨论】：

好的！但我不知道如何从 r.fn.init 中获取价值。
我喜欢这个，但它有问题。 closest 和 find 会给你任何 '.sibling' 而不需要下一个或相邻的。
@frikinside 问题？你能指出我可能在这里遗漏了什么.. :)
当然，但是在 tr 中为该选择器添加另一个“匹配项”，您可能会得到一些不需要的东西。例如，与前面的另一个 td 具有相同的类。我不知道在 OP 的真实情况下这是否可能，但指出这一点可能很有趣，就像免责声明一样。我不知道我的观点是否正确，我的英语很糟糕：/
是的，我同意。还有其他情况说 OP 在按钮上方添加了另一个并且 span 不包含在 tr 中。所以你 DOM 操作完全取决于 HTML 结构是怎样的 :) :)... 无论如何谢谢

【解决方案3】：

你面临的问题是你不想要兄弟姐妹，你想要兄弟姐妹的孩子。

function getValueFromSibling(me) {
    var id = $(me).parent().next().find('span.childSibbling').text();
    console.log(id);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tr>
    <td>
      <button type="button" onClick="getValueFromSibling(this)"></button>
    </td>
    <td>
      <span class="childSibbling">100</span>
    </td>
</tr>
</table>
</body>

有了这个，首先我们做一个.parent() 将我们移动到td 元素上。然后，我们使用.next() 继续下一个td 元素，最后，使用find('span.childSibbling') 恢复span.childSibbling。使用.text()方法恢复节点的innerText或使用.html()方法恢复节点的innerHTML。

对于r.fn.init的问题，this question有很好的回答。

【讨论】：

好吧，我想我明白它是如何工作的，但是如果在 span 之前的这个行元素中有更多 td 元素，并且类 sibbling 这不是最好的解决方案。
@Adriano 对不起，有一个错字，我把它变成了一个脚本，现在正在正确返回值。关于您的评论，您是对的，这仅适用于下一个（并且只有下一个）td。 bipen 答案不要专注于此，而是选择该类的任何元素。不同的方法有不同的反响。明智地选择;)