Replace specific html with jquery?

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.

so you only need to add one class? use the addClass() method... — Th0rndike
– Th0rndike, Commented Jun 18, 2012 at 8:37

gdoron · Accepted Answer · 2012-06-18 08:39:48Z

4

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

answered Jun 18, 2012 at 8:39

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rob W Over a year ago

What about the three hypens? Hint: .text()

John Smith Over a year ago

Thanks but maybe I didn't explain well. I have a lot of checkboxes, so for example I have that code 10 times, then I have another with ------ instead of --- 30 times, then again --- then 20 more starting with ------, so I need to add class based on what the checkbox label content is starting with --- or ------, not just the first.

gdoron Over a year ago

@JohnSmith. see the update, I thought this might be the case.

John Smith Over a year ago

Thanks gdoron, Not exactly what I was looking for but it will get the job done.

Rob W · Accepted Answer · 2012-06-18 09:19:19Z

2

Use this :

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

For checking particular text,

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

edited Jun 18, 2012 at 9:19

Rob W

350k87 gold badges811 silver badges683 bronze badges

answered Jun 18, 2012 at 8:39

Subodh

2,21418 silver badges22 bronze badges

Comments

Somnath Muluk · Accepted Answer · 2012-06-18 11:45:55Z

1

Use this:

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

edited Jun 18, 2012 at 11:45

Somnath Muluk

58.3k39 gold badges225 silver badges230 bronze badges

answered Jun 18, 2012 at 8:43

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

3 Comments

gdoron Over a year ago

.removeClass("existingclass") why is that for?

Rab Khan Over a year ago

Removing for existing one as the name suggests, then adding new one

gdoron Over a year ago

But he's not trying to remove one in the question. :)

Collectives™ on Stack Overflow

Replace specific html with jquery?

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related