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

Question

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

因此，如果右内容文本和左内容文本相等，那么左内容-内容--这个特定元素--我们添加了一个新类。

我尝试了一些方法，但它并没有按照我的期望起作用。请帮我把这个修好。如果有什么问题，请纠正我。

​

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>

​

Answer 2

您可以使用:contains，这将检查元素是否需要文本，然后对该元素进行addClass。

演示代码：

​

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>

​