Check if input is empty, if not, add class to parent div

Question

I have a number of inputs like this:

<div class="fg-line">
    <input type="text" class="form-control fg-input place-edit placeInformation" id="place_name">
    <label class="fg-label">Place Name</label>
</div>
<div class="fg-line">
    <input type="text" class="form-control fg-input place-edit placeInformation" id="place_address">
    <label class="fg-label">Place Address</label>
</div>

I get some data from an API and then append to these inputs (so the user can edit).

This works fine. The issue is that I want to add a class to this:

<div class="fg-line">

This is simple enough if I only have one of these and one input, but since I have multiple, I need some way to check each input and if not empty add the class fg-toggled such that the line becomes:

<div class="fg-line fg-toggled">

If I had just one input, I'd do this:

if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
  $('.fg-line').addClass('fg-toggle')
}

But I don't know how to do this without writing this out for every class (there are 30+). Is there a way to iterate this somehow? I tried checking .place-edit but since it's a class, if any of the inputs with the class are not empty then they all get the new class added.

Answer 1

Can use filter()

$('.fg-line').has('.placeInformation').filter(function(){
   return !$(this).find('.placeInformation').val()
}).addClass('fg-toggled')

Not sure what "default" should be or how it is declared. Could be set in a data attribute and add an || to above filter condition

Answer 2

Simply loop through each input and find the parent using .closest().

$('.placeInformation').each(function() {
    var $input = $(this);

    if ($input.val()) {
        var $parent = $input.closest('.fg-line');
        $parent.addClass('fg-toggled')
    }

});

Sample plunkr

Answer 3

Use each() and closest() Try this :

 $(".fg-input").each(function() { if ($(this).val() != '') { $(this).closest(".fg-line").addClass('fg-toggle'); } }) 

 .fg-toggle { color:green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fg-line"> <input type="text" class="form-control fg-input place-edit placeInformation" id="place_name"> <label class="fg-label">Place Name</label> </div> <div class="fg-line"> <input type="text" class="form-control fg-input place-edit placeInformation" id="place_address"> <label class="fg-label">Place Address</label> </div> 

Answer 4

You could just loop through the .place-edit class and then check the values and add the class to the parents, like this:

$('.place-edit').each(function(){
    if($(this).val() != '' || $(this).val() != $(this).defaultValue) {
    $(this).parent().addClass('fg-toggle');
  }
})

Answer 5

Try this.. I'm assuming they all have the same class

 if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
  $('.fg-line').each(function(){
    $(this).addClass('fg-toggle')
  });
}