How to get html contents of multiple spans and add the value as class

Question

My HTML:

<div class="inside">
   <ul class="fourcol first">
       <li class="amenity-item">Something: <span>0</span></li>
       <li class="amenity-item">Something: <span>0</span></li>
       <li class="amenity-item">Something: <span>1</span></li>
       <li class="amenity-item">Something: <span>0</span></li>
       <li class="amenity-item">Something: <span>1</span></li>
       <li class="amenity-item">Something: <span>0</span></li>
       <li class="amenity-item">Something: <span>1</span></li>
       <li class="amenity-item">Something: <span>1</span></li>
       <li class="amenity-item">Something: <span>0</span></li>
   </ul>
</div>

What I am trying to accomplish:

<div class="inside">
   <ul class="fourcol first">
       <li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
       <li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
   </ul>
</div>

My attempt:

$(function() {

    var value_of_span = $.each('span.amenity-val').html()

    if (value_of_span == 0) {
        $('span.amenity-val').addClass('amenity-val-0');
    }

    if (value_of_span == 1) {
        $('span.amenity-val').addClass('amenity-val-1');
    }

})

Answer 1

You can use:

1) $.each() to loop through all the span element inside .amenity-item :

2) text() to get the text inside your span

3) addClass() to add the class based on the retrieved text respectively

$.each($('.amenity-item span'), function () {
    var text = $(this).text();
    $(this).addClass('amenity-val-' + text);
});

Fiddle Demo

Answer 2

DEMO

$('span').each(function() {
    var x = $(this).text();
    $(this).addClass('amenity-val-' + x);
});

This will iterate over each span tag, grab it's text and save it as var x, and then we just simply add the class to that span.