檢測幾個間距中的文本

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; 
    } 
}); 

這可能會幫助你在這個特定情況下