jQuery：选择包含任何文本的第一个锚点

Posted 2023-05-09

【中文标题】jQuery：选择包含任何文本的第一个锚点

【英文标题】：jQuery: select first anchor that contains any text

【发布时间】：2013-07-14 08:36:56

【问题描述】：

考虑以下标记：

<a href="#"></a>
<a href="#"><img src="foo.png" /></a>
<a href="#">aaa</a>
<a href="#">bbb</a>

是否可以使用 jQuery 选择器来获取包含任何文本的第一个锚点（但如果它仅包含图像则不能）？ （在这种情况下，aaa 一个）

【问题讨论】：

<a href="#">foo<b>bar</b></a> 和 <a href="#"><b>bar</b></a> 怎么样？

这两种情况都应该定位。

【参考方案1】：

jQuery 没有懒惰的first 选择器，所以在过滤它们之前你仍然会匹配所有的锚标签：

$('a').filter(function() 
    return $(this).text();
).first()

【讨论】：

我想可以在找到第一个匹配项后通过首先检查 isFound 布尔值来停止过滤功能，这将提高效率。

@exizt: filter() 将在数组中的每个元素上调用。除非您使用像 $.each 这样的循环，否则您无法真正停止它，但是如果您首先使用的是 jQuery，那么微优化就没有意义了。

嗯，是的，但是如果我们先检查isFound，它不会调用每个人的text() 方法。尽管这种优化是否会带来显着的性能优势确实值得怀疑。

【参考方案2】：

这个复杂的选择器首先检查元素没有任何子元素，然后确保元素不为空。

var anchor = $("a:not(:has(img)):not(:empty)").eq(0);

工作示例 http://jsfiddle.net/dZLKE/3/

【讨论】：

是的，这个得到了图像。

空荡荡的孩子呢？

@Blender 不会 :not(:empty) 报道吗？

@Kobi 一切都很好，你让我进行了额外的测试。双赢场景

就性能而言，像这样的复杂选择器并不是最好的解决方案。我在这里将其与我的答案进行比较：jsperf.com/complex-vs-simple

【参考方案3】：

var txtEl;
$('a').each(function(i, el)
  var text = $(el).text();
  if(text != "")
     txtEl = el;
     return false;
  
);

Jquery Selector

【参考方案4】：

$('a').each(function()
    if($.trim($(this).text()) != '')
       alert($(this).text());
    
);

现场演示：http://jsfiddle.net/AGKeY/2/

【讨论】：

String.prototype.trim() 在 IE8 及更低版本中不可用。请改用$.trim()。

【参考方案5】：

这将返回容器中带有文本的第一个锚点，而不是遍历所有元素。

var getFirstAnchorWithText = function (container) 

    var anchor = null;

    container.find('a').each(function () 
        if ($(this).text()) 
            anchor = $(this);
            return false; // Exits from the loop as soon as the element is found
        
    );

    return anchor;

演示小提琴here.