Question

Just when I think I am beating JQuery I get stumped.

<div class="productAttributeValue">
<div class="productOptionViewRectangle">
<ul>
    <li class="option">
        <label for="dca37e79338c28f796c3bdd4e88492f2">
            <input
                type="radio"
                class="validation"
                name="attribute[52]"
                value="97"
                id="dca37e79338c28f796c3bdd4e88492f2"
                        />
            <span class="name">25 ML</span>
        </label>
    </li>

    <li class="option">
        <label for="b6cc5db62235218dade2cbe8dcdfdad4">
            <input
                type="radio"
                class="validation"
                name="attribute[52]"
                value="98"
                id="b6cc5db62235218dade2cbe8dcdfdad4"
                        />
            <span class="name">50 ML</span>
        </label>
    </li>

</ul>
</div>
</div>

I need to loop through the li and get the value of the input and change the the text of the class=”name” within that li. If value = 97 then the text for that span should be 50 ML (RRP $69.00) for example.

We are using 3rd party stuff they render the page as they see fit. Need t be able to change it to what we need.

Thanks again for your help. Appreciate it.

Answer 1

You can do that simply with this line of code:

$('.option input[value=97]').next('.name').text('50 ML (RRP $69.00)');

To make it easier to add more options, create an array to do the same:

var d = [
  {'value':'97','text':'50 ML (RRP $69.00)'},
  {'value':'[your value]','text':'[your text]'}
];

$(d).each(function() {
  $('.option input[value='+this.value+']').next('.name').text(this.text);
});