Question

I have a huge checkbox list with different levels and I would like to style it but since all the items have the same class and no id or contact form 7 for wordpress has no option to make sublevels in the checkbox panel I thought I could achieve this with jquery.

The html generated is:

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

What I am trying to achieve is to replace

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

with

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

I tried with this code

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

But with no success, is it possible to achieve this with jquery or not ?

Thanks for your time.

Answer 1

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

If you want to add a class to all spans based on their index:

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