检测几个间距中的文本

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（'ul li span'）.text（）返回每个文本范围，我无法比较其中的所有文本。

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

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

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

Working example

Answer 3

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

这可能会帮助你在这个特定情况下