如何使用 jQuery 获取 span 元素的值答案

【问题标题】：How to grab the value of the span element using jQuery如何使用 jQuery 获取 span 元素的值
【发布时间】：2013-12-21 03:57:52
【问题描述】：

我有以下代码：

<tr>
<td Width="50%" align="left">
<span id="ctl00_lblTotalDesc">Ext. Subtotal</span></td>
<td Width="50%" align="right">
<span id="ctl00_lblTotalValue">100,087,000.00</span></td>
</tr>

我使用以下方法来获取第二个 span 元素的值：

spanValue = $('#ctl00_lblTotalValue').text();

但这似乎在 Spock/Geb 中不起作用。我收到以下错误：

TypeError: $(...).text is not a function

我做错了什么

如果我使用 $('#ctl00_lblTotalValue')，则会收到以下错误

[object HTMLTableElement]

Firefox 控制台没用，所以使用 Chrome 控制台。

在 Chrome 中：如果我尝试 $('#ctl00_lblTotalValue')，我会得到 p>

<span id="ctl00_lblTotalValue">100,087,000.00</span>

但是 .text() - 给出类型错误：Object # has no method 'text'

【问题讨论】：

看起来 $ 不是指 jQuery 在这里试试 jQuery('#ctl00_lblTotalValue').text()
页面中使用的其他库是什么？你也有正确地在页面中包含 jQuery
检查alert($ === jQuery)
当我尝试打印它返回 null 的值。嗨 Arun，我在该页面上使用了很多选择器，并且所有选择器都可以正常使用 $ 函数
您似乎将 javascript 与 Groovy 混合，并将 Geb 与 jQuery 混合在一起，而不是第一次。这些东西都不一样。此外，TypeError: $(...).text is not a function 不是 Geb/Spock/Groovy 错误，而是 javascript 错误。你到底在问什么？

标签： jquery jquery-selectors spock geb

【解决方案1】：

试试这个：

$("span", id:"ctl00_lblTotalValuee").text()

假设值 ct100 是一个常数，并且不是由您的服务器端应用程序随机生成的。

【讨论】：

【解决方案2】：

您似乎有另一个覆盖 $ 函数的 js 框架。这意味着您必须改用 jQuery('...') 。你必须考虑的另一点是，据我所知，在我使用过的所有 js 框架中，$ 函数做同样的事情，但有时它会选择第一个匹配的 html 元素，然后当你的输出如下：

[object HTMLTableElement]

这意味着 html 对象不是 span 元素。试试：

$('#ctl00_lblTotalValue').length

如果结果大于 1，则表示您有多个具有相同 id 的 html 元素。

【讨论】：

顺便说一下，我在Firefox上使用了控制台，结果很不一致。我尝试使用 chrome，如果尝试 $('#ctl00_lblTotalValue')，我会得到 100,087,000.00。但是 .text() - 给出类型错误：Object # has no method 'text'
别担心，还有很多方法可以做到这一点。只是为了确保您的 $ 函数是否正常工作，尝试 $(/*let it be empty*/).jquery 如果结果是您的 jQuery 版本，则意味着 $ 函数是原始函数，如果不是，您最好尝试 jQuery('#ctl00_lblTotalValue') 而不是 $('#ctl00_lblTotalValue')。
但是如果你的$ 函数正在工作并且你仍然有这个问题，这意味着，除了 jQuery，你的页面中还有另一个 JavaScript 库，并且这个库已经在你的 jQuery 框架中删除了一些 jQuery 函数，你可以这样做：jQuery.fn.text = null; delete jQuery.fn.text;，如果是这个问题你可以试试$('#ctl00_lblTotalValue').html()，在你的情况下它会和$(...).text()一样，如果它不起作用，请告诉我。
看起来 Geb 存在限制。对不起，我的代码中的选择器都是基于 Geb 而不是完整的 jQuery。但是它确实支持大多数 jQuery 选择器，但看起来有一个限制。

【解决方案3】：

“ctl00_lblTotalValue”是您分配给跨度的 ID，还是服务器端控件的 ID 由环境自动分配？

例如，如果我的 .NET aspx 页面中有此代码

<div id="pnlHeader" runat="server"></div>

它在 html 页面中呈现为

<div id="ctl00_pnlHeader"></div>

如果是这样，我需要在 jquery 中使用这种语法来抓取它

$("#<%= pnlHeader.ClientID%>").text()

如果您的控件是服务器端控件，则可能需要使用

spanValue = $("#<%= lblTotalValue.ClientID%>").text();

【讨论】：

这是我在 Spock 页面中定义的选择器。我从网页上抓取了选择器。为 span 元素生成的 ID 比我上面写的要复杂得多。实际ID为：ctl00_cphMain_QuoSummary_gridTotals_ctl02_lblTotalValue
虽然ID看起来像是在服务器端生成的，但在页面上总是一样的。你能在这里写jQuery吗？
你能澄清一下“在这里写 jQuery”是什么意思吗？我已经在答案中作为 spanValue = $("#").text();