JQuery: получить значение ввода и добавить его как класс к метке вложения?

Question

Это должно быть просто: как мне получить значение ввода и добавить его как класс к тому же вводу? То есть, я хочу получить значение gray и добавить class="gray" к вмещающей метке, чтобы я мог стилизовать текст метки с надписью «Серый» в CSS.

Это разметка:

<li>
<label>
<input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="gray"/>Gray
</label>
</li>

<li>
<label>
<input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="green"/>Green
</label>
</li>
<li>

Использование

$("li label").each(function() {
var $link = $(this).find("input").val();

получает значение каждого значения; но как мне .addClass на каждую вмещающую метку, т.е. <label class="gray">

Из приведенного ниже ответа это добавляет класс к родительской метке: https://jsfiddle.net/j08691/qnzpahrq/

$("li input").each(function() {
      $(this).parent().addClass($(this).val());
})

Answer 1

Это будет сделано:

$("li input").each(function() {
      $(this).addClass($(this).val());
})

$("li input").each(function() {
      $(this).addClass($(this).val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <label>
<input type="radio" id="acf-field" name="acf[field_5af32dbd01019]" value="gray"/>Gray
</label>
  </li>

  <li>
    <label>
<input type="radio" id="acf-field1" name="acf[field_5af32dbd01019]" value="green"/>Green
</label>
  </li>
</ul>