html - 如何比较 JQuery 中的两个元素文本？

Question

在我的项目中，我使用的是 Jquery。所以我有两个部分，每个部分都有多个具有不同内容的元素，例如，左内容和右内容。所以 left-content 和 right-content 具有相同的类，具有多个元素，而 right-content 是动态的，而 left-content 是固定的。

因此，如果 right-content 文本和 left-content 文本相等，则 left-content 我们拥有的特定元素会添加一个新类。

我尝试了一些方法，但它没有按照我的预期工作。请帮我解决这个问题。如果有任何问题，请纠正我。

jQuery(document).ready(function(){
   let headingElement = jQuery('#articleTitle').text();

    jQuery('.ellipsis a').filter(function(){
        return jQuery(this).text() === headingElement;
    }).addClass('active');
});

.active{
  color:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="left-content">
  <div class="ellipsis">
    <a href="#">Terminology one</a>
  </div>
  <div class="ellipsis">
    <a href="#">Terminology two </a>
  </div>
  <div class="ellipsis">
    <a href="#">Terminology three</a>
  </div>
</div>

<div class="right-content">
  <h2 class="heading" id="articleTitle">Terminology two</h2>
</div>

标签： htmljquerycss

Answer 1

您可以使用:contains它来检查元素是否需要文本，然后将添加类添加到该元素。

演示代码：

jQuery(document).ready(function() {
  let headingElement = jQuery('#articleTitle').text();
  jQuery('.ellipsis a:contains(' + headingElement + ')').addClass('active');
});

.active {
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="left-content">
  <div class="ellipsis">
    <a href="#">Terminology one</a>
  </div>
  <div class="ellipsis">
    <a href="#">Terminology two </a>
  </div>
  <div class="ellipsis">
    <a href="#">Terminology three</a>
  </div>
</div>

<div class="right-content">
  <h2 class="heading" id="articleTitle">Terminology two</h2>
</div>