获取跨度内文本的值答案

【问题标题】：Get value of text inside span获取跨度内文本的值
【发布时间】：2011-08-16 05:23:30
【问题描述】：

我正在使用带有 JQuery 的 Flexigrid 插件。好的，所以我有一个带有两个 span 元素的 div，它们将包含 flexigrid 提供的按钮的文本/显示文本。问题是，除了添加不同的文本之外，没有向这些按钮添加 id 的机制。

<div class="tdiv2>  
    <div class="fbutton">
        <div>
            <span class="view" style="padding-left: 20px;">Add</span>
        </div>
    </div>
    <div class="fbutton">
        <div>
            <span class="view" style="padding-left: 20px;">Delete</span>
        </div>
    </div>
</div>

这就是按钮的排列方式。因此，单击该按钮，我得到了跨度内的文本，如添加和删除。现在我想向该跨度添加一个类标记，以区分活动按钮和另一个按钮。

所以我想出了一个想法，如果我可以得到与返回的文本匹配的跨度文本，我可以将类添加到该跨度中。

但是当我这样做时

alert($('.tDiv2 span').html());

我只得到第一个跨度的文本，而不是第二个跨度的文本。有人可以帮助我获取两个跨度的 html，而不仅仅是第一个。

【问题讨论】：

标签： javascript jquery jquery-plugins javascript-framework jquery-events

【解决方案1】：

如果您尝试从中获取 html 或 text 之类的属性，jQuery 会自动选择系列中的第一个元素。要获得第二个（或任何数字）尝试：

alert($('.tDiv2 span').eq(1).html()); //returns 2nd element's html content

您可以将任何基于 0 的索引替换为 1。

【讨论】：

【解决方案2】：

试试这个>

$('.tDiv2 span').each(function(index, el) { alert($(el).html()); });

【讨论】：

你好，当我尝试你的代码时，它给了我这个错误。 “el.html 不是函数”
它仍然给我同样的错误。我只是查看了 jquery 文档，哪个是集合？我理解函数将是回调。 “jQuery.each（集合，回调（indexInArray，valueOfElement））”
集合将是调用它的对象。在您的情况下，它将是$('.tDiv2 span')。根据文档，您需要传递一个带有 2 个参数的回调函数。你能提醒$('.tDiv2 span').length 看看它有多少对象吗？
好的，我只是传递了“el”而不是“el.html()”，它返回了两次对象跨度元素
刚刚更正了。 el 基本上是一个 dom 元素，而不是 jQuery 元素。所以我们将它包裹在 $() 上以获取 jQuery obj。我的错。

【解决方案3】：

你需要each。

$('.tDiv2 span')each(function(node){ alert(node.html()); });

但是，我想指出，这种方法可能会导致屏幕阅读器用户出现可访问性问题。如果您出于某种原因绝对必须重新发明按钮，请使用ARIA 属性，这样您的盲人访问者就有希望让它正常工作。

【讨论】：