Jquery find('*'）使A标记加倍

Jquery find('*') doubling A tags

本文关键字：find Jquery      更新时间：2023-09-26

我对查找A标记的元素上的Jquery find（'*'）有点困惑。我的示例代码如下：

<ul>
  <li id="cell1" data-link="Page 1">
    <p>Example text</p>
  </li>
  <li id="cell2" data-link="Page 2">
    <h2 class="story-body__crosshead">More from our Diet Debate series:</h2>
    <p><a href="http://www.bbc.co.uk/news/health-35150598" class="story-body__link">Read: Is breakfast a waste of time?</a></p>
    <p><a href="http://www.bbc.co.uk/news/health-35215686" class="story-body__link">Watch: How healthy is your breakfast?</a></p>
  </li>
  <li id="cell3" data-link="Page 3">Cell 3</li>
  <li id="cell4" data-link="Page 4">Cell 4</li>
</ul>

Js代码

$(elem).find('*').each(function(){
   if ($(this).html().indexOf('breakfast') > 0){
       alert($(this).html());
    }
});

但是，Alert是针对每个A标签向发出两次警报。它显示内部文本和外部文本（完整的html）。然而，我依赖于移动元素并替换它们，所以这段代码最终会在同一页面上输出两次链接。我是不是错过了一些显而易见的东西？

您的代码正在匹配a标记和a标记的任何祖先，因为*匹配elem（即您的LI）中的所有DOM元素。在您的示例中，它将匹配p标记和a标记。

使用仅针对a标签的作用域选择器：

例如

// Elem here is the li about
$("a", elem).each(function(){
    if ($(this).html().indexOf('breakfast') >= 0){
        alert($(this).html());
    }       
});

或者使用:contains:更简单

$("a:contains(breakfast)", elem).each(function(){
    alert($(this).html());
});

注意：您的代码只允许包含breakfast而不允许包含Breakfast的文本（例如，如果它在开头并大写），因为检查区分大小写。

相关文章：