jQuery通过文本获取标签

Posted 2023-05-09

【中文标题】jQuery通过文本获取标签

【英文标题】：jQuery Get Label By Text

【发布时间】：2013-12-01 18:21:41

【问题描述】：

我有一个简单的问题，我为此创建了一些丑陋的代码。

我的问题是需要通过它显示的文本来获取标签，例如：

    <div class="editor-label">
    <label for="iwantthisid">Test<span class="editor-label-required">*                </span>

    </label>

所以在这里我想搜索页面（尽可能快）以获取带有 text = "Test" 的标签。

然后我想从该标签中提取“For”值。

最好的方法是什么。

我知道要解决部分问题，这只是$(element).attr("for") 这是我坚持的第一步！

谢谢

【参考方案1】：

使用这个

$('label:contains(Test)').attr('for')

【讨论】：

谢谢，您认为这是最佳的搜索方式吗？

@LmC - 绝对不是，但它有效，而且您可能永远不会注意到性能下降。

当然，这也会匹配Test Test和I have a Test，这可能是个问题。 :contains doesn't offer exact matching, only substring matching.

@Blazemonger - 标签还包含* ，所以这可能不是问题？

【参考方案2】：

我建议：

$('label').filter(function () 
    return this.firstChild.nodeValue.trim() === 'string';
).attr('for');

Simple demo.

如前所述，为了更好地保证（如果不需要精确的大小写，并为那些不实现 String.trim() 的浏览器提供服务）：

$('label').filter(function () 
    return $.trim(this.firstChild.nodeValue).toLowerCase() === 'string';
).attr('for');

Simple demo.

在功能环境中使用这种方法：

function getLabelByText(needle, caseSensitive) 
    var str;
    return $('label').filter(function()
        str = $.trim(this.firstChild.nodeValue);
        return caseSensitive ? str === needle : str.toLowerCase() === needle.toLowerCase();
    );


console.log(getLabelByText('Test',false));

Simple demo.

这些不同的方法取决于您要搜索的文本是否是label 元素的firstChild（根据您在问题）。

【讨论】：

如何使用参数调用该函数？

除了trim()ing 字符串之外，在某些情况下，您可能会发现将其转换为toLowerCase() 会有所帮助。

【参考方案3】：

只需像这样为标签分配一个 id：

<label id="theLabel" for="iwantthisid">Test<span class="editor-label-required">*</label>

并通过$("#theLabel").attr("for")获取值

【讨论】：

搜索文本的全部原因是因为我们无法控制 ID。