Select parent ID always returns undefined

Question

I am working on an application, where there is a requirement of uploading an image in the modal, and show the image in a preview div on close of the modal. I am having difficulty accessing the ID of the parent, as it always returns undefined. I am not able to figure out why this is happening. This is what I have tried so far. I am posting the necessary JS and HTML. I have a total of 4 modals each having a different ID, and functionality will work same for all 4 modals.

var $contactPhotos = $contactForm.find(".koh-contact-photo");
$contactPhotos.each(function() {
      var $photoInput = $(this).find("input[type=file]");

      function readURL(input) {
        if (input.files && input.files[0]) {
          var photoPreview = $photoInput.parent().find(".preview");
          photoPreview.html("");
          var reader = new FileReader();
          reader.onload = function(e) {
            var img = $("<img />");
            img.attr("style", "height:41px;");
            img.attr("src", e.target.result);
            photoPreview.append(img);
          }
          reader.readAsDataURL(input.files[0]);
        }
      }

<div class="koh-contact-photo">
  <span><fmt:message key='photo1' /></span> <label id="upload-1" class="button-default"><fmt:message
										key='photo.upload' /></label>
  <div class="preview"></div>
  <button type="button" class="koh-photo-remove" style="background:#FFF;border:1px solid #77777A;">
									<span class="icon" data-icon="&#xe605"></span> <span
										class="label"><fmt:message key='photo.remove.text' /></span>
								</button>

  <!-- The Modal -->
  <div id="myModal1" class="modal">
    <!-- Modal content -->

    <div class="modal-content">
      <span class="close">&times;</span>
      <h3 class="modal-title"> Upload Photo 1 </h3>

      <div class="modal-inner">
        <span>Browse for a photo</span> <label style="margin-bottom:20px;" class="button-default browse" for="photo1">BROWSE</label><input id="photo1" type="file" name="photo1" data-parsley-filesize="3" data-parsley-filetype="image/jpeg, image/png, image/gif, image/bmp"
          data-parsley-trigger="change" />

        <hr class="modal-hr" />
        <div class="guidelines-modal">
          <p> GENERAL GUIDELINES </p>
          <p> Supported files are: .jpg, .gif, .png, .bmp </p>
          <p> Maximum File Size: 3MB</p>
          <p style="margin-bottom:10px;"> For best results: upload at 400 x 300</p>
          <p> Note: images are automatically resized</p>
        </div>
        <div class="koh-contact-captcha modal-hr">
          <!--div class="g-recaptcha" data-sitekey=<fmt:message key='kohlerSterling.google.captcha.key' />></div-->
          <!--div class="g-recaptcha" id="recaptcha1"></div-->
          <div id="recaptcha3" class="captcha"></div>
          <div class="error-message">
            <span><fmt:message key='required.field.text' /></span>
          </div>

        </div>
        <div class="terms-modal">
          <div class="checkbox">
            <input type="checkbox" id="terms-condns" />
            <label style="font-family:Helvetica Neue LT Pro Roman !important;font-size:12px !important;color:#000 !important;font-weight:400 !important;" for="terms-condns">I agree to the <a class="modal-anchor" href="#">Terms and Conditions</a></label>
          </div>
        </div>
        <hr class="modal-hr" />
        <div class="modal-buttons">
          <label class="button-default-modal" style="margin-right:20px;">CANCEL</label>
          <label class="input-button-modal">UPLOAD</label>
        </div>

      </div>
    </div>
    <input type="hidden" id="captchaKey" value="<fmt:message key='google.recaptcha.site.key'/>">
  </div>
</div>

When I click on the upload button, I want to select the div with class "preview". Any help is appreciated.

Answer 1

.find() will get elements which are descendants of selected element. Without looking too deep in code I think this can be part that you can improve var photoPreview = $photoInput.parent().find(".preview"); line.

If $photoInput has a parent div with class name "preview" , you can select it with $photoInput.parent(".preview");