changing parents parent class when changing select with jQuery

Question

I want to ideally use a toggle instead of a condition but was not sure how as new to jQuery but think im getting the right logic.. or starting to with what i want to do.

By default the parent parent is grey which is for "updated" and "new" being green so want to toggle the class depending on whats set and when select in changed?

 $('.column.small select').on('change', function() { if ($(this).parent().hasClass('grey')) { $(this).parent().parent().removeClass('grey'); $(this).parent().parent().addClass('green'); } }); 

 .column.small { color: white; } .grey { background: grey } .green { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column small grey"> <div class="form-group"> <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> <option value="u" selected="selected">Updated</option> <option value="n">New</option> </select> </div> </div> <div class="column small grey"> <div class="form-group"> <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> <option value="u" selected="selected">Updated</option> <option value="n">New</option> </select> </div> </div> <div class="column small green"> <div class="form-group"> <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> <option value="u">Updated</option> <option value="n" selected="selected">New</option> </select> </div> </div> 

Answer 1

No need to do it that way. Try with parents -

$('.column.small select').on('change', function() {
  if ($(this).parents('.column').hasClass('grey')) {
    $(this).parents('.column').removeClass('grey');
    $(this).parents('.column').addClass('green');
  }
});

You can also use closest method for this. And you should use method chaining.

$(this).closest('.column').removeClass('grey').addClass('green');

And if you are using same object multiple time them try to avoid DOM element look ups multiple times to reduce the execution process. You can do this -

var parent_div= $(this).parents('.column');
if (parent_div.hasClass('grey')) {
   parent_div.removeClass('grey');
   parent_div.addClass('green');
}

Fiddle

Answer 2

You can just use .closest and make it in single line with removeClass and addClass

 $('select').on('change', function() { if ($(this).closest('.column').hasClass('grey')) { $(this).closest('.column').removeClass('grey').addClass('green'); } }); 

 .column.small { color: white; } .grey { background: grey } .green { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column small grey"> <div class="form-group"> <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> <option value="u" selected="selected">Updated</option> <option value="n">New</option> </select> </div> </div> <div class="column small grey"> <div class="form-group"> <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> <option value="u" selected="selected">Updated</option> <option value="n">New</option> </select> </div> </div> <div class="column small green"> <div class="form-group"> <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> <option value="u">Updated</option> <option value="n" selected="selected">New</option> </select> </div> </div> 

Or event with .toggleClass for both the class to get activated/de-activated

$(this).closest('.column').toggleClass('grey green');

Answer 3

Try this

 $('.column.small select').change(function() { $(this).parents('.column').toggleClass('grey green'); }); 

 .column.small { color: white; } .grey { background: grey } .green { background: green ; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column small grey"> <div class="form-group"> <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> <option value="u" selected="selected">Updated</option> <option value="n">New</option> </select> </div> </div> <div class="column small grey"> <div class="form-group"> <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> <option value="u" selected="selected">Updated</option> <option value="n">New</option> </select> </div> </div> <div class="column small green"> <div class="form-group"> <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> <option value="u">Updated</option> <option value="n" selected="selected">New</option> </select> </div> </div> 

Answer 4

Try:

$('.column.small select').on('change', function() {
  var column = $(this).closest('.column');
  column.removeClass('green');
  if ($(this).find(':selected').text() == "New") {

    column.addClass('green');
  }

});

Answer 5

I've completely changed the logic so that it runs on load as well as it's now much more dynamic, see a working jsFiddle here: I've created it into a function, so it's called on load and also on change which is much better.

https://jsfiddle.net/wigster/6Lps0drd/2/

Also had to add an id to each option/select:

<div class="column small grey">
  <div class="form-group">
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u">Updated</option>
      <option id="n" value="n" selected="selected">New</option>
    </select>
  </div>
</div>

<div class="column small grey">
  <div class="form-group">
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u" selected="selected">Updated</option>
      <option id="n" value="n">New</option>
    </select>
  </div>
</div>

<div class="column small green">
  <div class="form-group">
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u">Updated</option>
      <option id="n" value="n" selected="selected">New</option>
    </select>
  </div>
</div>

JS:

function selectBoxColourUpdate(optionSelected) {
  var selectedId = $('option:selected', optionSelected).attr('id');
  console.log(selectedId);
  if (selectedId == "u") {
    optionSelected.parent().parent().removeClass('grey');
    optionSelected.parent().parent().addClass('green');
  } else {
    optionSelected.parent().parent().removeClass('green');
    optionSelected.parent().parent().addClass('grey');
  }
}
$('.column.small select').on('change', function() {
  selectBoxColourUpdate($(this));
});
$( document ).ready(function() {
  $('.column.small select').each(function (){
    selectBoxColourUpdate($(this));
  })
});