jQuery 文本属性选择器

Posted 2023-05-09

【中文标题】jQuery 文本属性选择器

【英文标题】：jQuery text attribute selector

【发布时间】：2011-03-04 21:38:48

【问题描述】：

我正在尝试将 text 属性用作选择器，但我无法完全掌握这种行为，如果有人能解释一下，我将不胜感激。例如给定<span class="span_class"><a class="a_class">text</a></span>，$('a.a_class').text() 按预期给出“文本”。然而$('a.a_class[text]') 不会匹配任何元素，$('span.span_class > a.a_class[text]') 也不会匹配，但$('span.span_class* > a.a_class[text]') 会匹配（尽管不在 IE 中）。 对于 IE，我能想到的唯一解决方法是遍历跨度中包含的所有锚点，在每个锚点上使用 .text() 并将其与特定条件匹配，但它似乎比使用内置选择器慢。谁有更好的主意？

【参考方案1】：

如何使用自定义选择器

$(document).ready(function()
  $.extend($.expr[':'], 
    notext: function(elem, i, attr)
      return( $(elem).text() === "" );
    
  );        
);

概要

$('span:notext').remove();

您甚至可能想要创建一个处理正则表达式的选择器，例如

$.extend($.expr[':'], 
   'content': function(elem, i, attr)      
     return( RegExp(attr[3]).test($(elem).text()) );
   
);

概要

$('span:content(^api_)').remove();

将选择并删除所有文本以 api_ 开头的跨度

【讨论】：

我会在这里留下同样的评论：除非你需要一个正则表达式，否则使用.indexOf()，它快得多，当你'正在谈论选择器，尤其是在潜在的大量元素上，速度很重要。

完美，正是我想要的:)。谢谢。

是的，我也将其调整为使用 indexOf。谢谢大家的帮助。

使用$.text(elem) 代替$(elem).text() 可能更好——前者更快，因为它避免了构建新的jQ 实例。

@J-P - $.text() 对数组进行操作，它实际上是 $.text([this])，但在性能方面很好 :)

【参考方案2】：

这是因为在这种情况下“文本”不是属性。它是元素的内容。

您正在寻找:contains() 选择器：

$('a.a_class:contains(text)');

http://api.jquery.com/contains-selector/

请记住，此选择器将匹配字符串的任何部分。 contains(foo) 也将匹配“foo bar”。

如果你想精确匹配整个文本字符串，你可以使用filter()

$('a.a_class').filter(function() 
    return $(this).text() == "text";
);

---

编辑：

要查找内容以某个值开头的元素，您可以在filter() 中使用正则表达式：

$('a.a_class').filter(function() 
    return $(this).text().indexOf( "tex" ) >= 0;
);

编辑：更新为使用indexOf()，而不是@Nick 推荐的正则表达式。

【讨论】：

嗯好的。我一直在寻找的是“Starts with”，而$('span.span_class* > a.a_class[text^="tex"]') 工作得很好，直到我用 IE 对其进行了测试。

@Shagglez - 我根本没有意识到这会起作用。我想我会使用带有正则表达式的filter() 选项来确定文本是否以“tex”开头。

@Shagglez - 您可以使用@patrick 所拥有的功能，只需将return $(this).text() == "text"; 替换为return $(this).text().indexOf("text") ===0; 即可进行“开始”检查。

除非你需要一个正则表达式，否则使用.indexOf()，它快得多，当你谈论选择器时，尤其是在潜在的大量元素，速度很重要。