CODEWITHSUNDEEP
jqueryhtmlreplace
John Smith
John Smith

Reputation: 3

Replace specific html with jquery?

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.

Upvotes: 0

Views: 133

Answers (3)

Rab
Rab

Reputation: 35572

Use this:

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

Upvotes: 1

Subodh
Subodh

Reputation: 2214

Use this : 

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

For checking particular text,

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

Upvotes: 2

gdoron
gdoron

Reputation: 150253

$('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);
});

Upvotes: 4

Related Questions