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

Question

在我的元素中，我使用 Jquery。所以我有两个部分，每个部分都有多个具有不同内容的元素，例如，左内容和右内容。所以 left-content 和 right-content 具有相同的类，具有多个元素，而 right-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>

Answer 1

我希望我正确理解了您的任务。

这样的结果有必要吗？

jQuery(document).ready(function(){
let headingElement = jQuery('#articleTitle').text();
  jQuery('.ellipsis a').each(function(){
    if (!$(this).text().indexOf(headingElement)) {
      $(this).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>