检测多个

Question

我必须比较h2元素的文本是否等于span的文本。这些文本将是dinamics，因此，我需要在页面加载时测试它。如果文本相同，我将只为此span添加一个类。

我的HTML会是：

<h2> "Tomatoes" </h2>

<ul>
    <li> <span> Oranges </span> </li>
    <li> <span> Apples </span> </li>
    <li> <span> Tomatoes </span> </li>
</ul>

我的jQuery将是：

jQuery(document).ready(function(){
  if(jQuery('h2').text() === jQuery('ul li span').text()){
      jQuery('ul li span').addClass('bold');
  }
});

有什么想法吗？实际上jQuery（＆＃39; ul li span＆＃39;）。text（）返回每个文本范围，我无法比较h2中的特定文本。

Answer 1

您需要迭代并检查条件

jQuery(function($) {
  var h2 = $('h2').text().trim().slice(1, -1); //slice to remove the quotes
  $('ul li span').each(function() {
    if ($(this).text().trim() == h2) {
      $(this).addClass('bold');
      return false;
    }
  });
});

.bold {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2> "Tomatoes" </h2>

<ul>
  <li> <span> Oranges </span> </li>
  <li> <span> Apples </span> </li>
  <li> <span> Tomatoes </span> </li>
</ul>

Answer 2

var h2 = $('h2').text().trim().slice(1, -1);
  $('ul li span').each(function() {
    if ($(this).text().trim() == h2) {
      $(this).addClass('bold');
      return false;
    }
});

这可能会帮助您解决此特定情况

Answer 3

您可以使用filter()来实现此目标：

var h2Text = $('h2').text().trim().replace(/"/g, '');
$('ul li span').filter(function() {
    return $(this).text().trim() == h2Text;
}).addClass('bold');

Working example