Append html to closest label element if required attr exists

Question

Have been trying to append HTML to label elements that are closest to input/select elements if the input/select is required.

Have tried switching to using classes and it works. But when appending to a label it does not work.

I do not want to use classes on labels. I have tried this and it also does not work.#

Any idea why this is happening?

$('.multistep-form').find('select').each(function(){
  if($(this).prop('required')){
    $(this).closest('label').append("<p>appended!</p>");
    console.log("it works!");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="multistep-form">
  <div class="form-group">
     <label for="exampleFormControlSelect2">Select Site</label>
     <select type="text" name="site_id" placeholder="Select Site" id="site_search" required>
        <option hidden disabled selected value='Select site'>Select Site</option>
     </select>
  </div>
</form>

score 0 · Accepted Answer · answered Mar 01 '21 at 16:11

There is no closest label due to select element. It's previous sibling. Use .prev() instead of .closest().

$('.multistep-form').find('select').each(function(){
  if($(this).prop('required')){
    $(this).prev('label').append("<p>appended!</p>");
    console.log("it works!");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="multistep-form">
  <div class="form-group">
     <label for="exampleFormControlSelect2">Select Site</label>
     <select type="text" name="site_id" placeholder="Select Site" id="site_search" required>
        <option hidden disabled selected value='Select site'>Select Site</option>
     </select>
  </div>
</form>

Append html to closest label element if required attr exists

1 Answers1