How to add input's value as a class to parent

Question

I want to take an input and use it's value as the name of a class that is added to it's parent.

So this:

<div class="">
    <input value="something">
</div>

Would turn into this:

<div class="something">
    <input value="something">
</div>

This is what I have, but it's not working:

$('input').parent('td').addClass($('input').attr('value'));

Answer 1

This should do it; you just have to decide when to do it -- as in what event should trigger this code:

$('input').parent('div').addClass( function() {
    return $(this).find('input').val();
});

$('input').parent('div').addClass( function() {
  return $(this).find('input').val();
});


//output new HTML
var newHTML = $('<div/>').html( $('div.something').clone() ).html();
$('pre.out').text( newHTML );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="">
    <input value="something">
</div>

<h1>New HTML</h1>
<pre class="out"></pre>

Answer 2

use .parent('div') instead of 'td'

(you can also use the .closest() Method)
Also you can use .val() instead of .attr() jsBin demo

var $input = $("input"); // Cache your selectors
$input.closest('div').addClass( $input.val() );