Замените конкретный html на jquery?

Question

У меня есть огромный список флажков с разными уровнями, и я бы хотел его стилизовать, но поскольку все элементы имеют один и тот же класс, а идентификатор или форма контакта 7 для wordpress не имеют возможности создавать подуровни на панели флажка, я думал, что смогу выполните это с помощью jquery.

HTML, генерируемый:

<span class="wpcf7-list-item-label">--- Checkbox level one</span> 
<span class="wpcf7-list-item-label">------ Checkbox level two</span> 

То, что я пытаюсь добиться, чтобы заменить

<span class="wpcf7-list-item-label">--- 

с

<span class="wpcf7-list-item-label level-one"> 

Я пытался с этим кодом

<script> 
    $("<span class=\"wpcf7-list-item-label\">---").replaceWith("<span class=\"wpcf7-list-item-label level-one\">"); 
    </script> 

Но без успеха, можно ли это сделать с помощью jquery или нет?

Спасибо за ваше время.

Answer 1

$('span.wpcf7-list-item-label:first').addClass("level-one") 

Если вы хотите добавить класс для всех пролетов в зависимости от их индекса:

$('span.wpcf7-list-item-label').each(function(index){ 
    $(this).addClass('level-' + index); 
}); 

Answer 2

Используйте это:

$('.wpcf7-list-item-label').first().addClass('level-one'); 

Для проверки конкретного текста,

$(".wpcf7-list-item-label:contains('---')").addClass('level-one'); 

Answer 3

Используйте это:

$('.wpcf7-list-item-label').first().removeClass("existingclass").addClass("newclass");