Обнаружить текст диапазона между несколькими

Question

Мне нужно сравнить, если текст элемента h2 равен тексту span. Эти тексты будут динамическими, поэтому мне нужно проверить это, когда страница загружена. Если текст равен, я добавлю класс только к этому 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() возвращает каждый текст, и я не могу сравнить конкретный текст 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

Вы можете использовать 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; 
    } 
}); 

Это может помочь вам в этом конкретном случае