Question

I have the following markup being generated by a CMS:

<div class="product">
<div class="blk">
  <span>
    <br>
    <label>Size</label>
    <select onchange="" name="">
  </span>
  <span>
    <br>
    <label>Colour</label>
    <select onchange="" name="">
  </span>
</div>
</div>

I need to replace the label text whenever ‘Size’ is present. I have tried a variety of code… such as:

$('.productOptionsBlock .blk span label').each(function() {
    if ($(this).('label:contains("Size")').length > 0) {
        $(this).replaceWith('<span>Alternative text</span>');
    }
});

But I can’t get the replacement to work. I get confused with using $(this) and how to attach the label contents…

Answer 1

No need to loop for this task, you just apply the same thing to the selector:

$('.productOptionsBlock .blk span label:contains("Size")').replaceWith('<span>Alternative text</span>');

Check a demo