親IDを選択すると常に未定義が返されます

Question

私はモーダルでイメージをアップロードする必要があるアプリケーションで作業しています。モーダルの終了時にプレビューdivにイメージを表示します。私は、常に未定義を返すので、親のIDにアクセスするのが難しいです。私はなぜこれが起こっているのか理解できません。これはこれまで私が試したことです。私は必要なJSとHTMLを掲示しています。私はそれぞれが異なるIDを持つ合計4つのモーダルを持っており、機能はすべての4つのモーダルで同じように機能します。

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 
 
\t \t \t \t \t \t \t \t \t \t key='photo.upload' /></label> 
 
    <div class="preview"></div> 
 
    <button type="button" class="koh-photo-remove" style="background:#FFF;border:1px solid #77777A;"> 
 
\t \t \t \t \t \t \t \t \t <span class="icon" data-icon="&#xe605"></span> <span 
 
\t \t \t \t \t \t \t \t \t \t class="label"><fmt:message key='photo.remove.text' /></span> 
 
\t \t \t \t \t \t \t \t </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>

私は、アップロードボタンをクリックすると、私はクラスの "プレビュー" でdiv要素を選択します。どんな助けもありがとうございます。

Answer 1

.find（）は、選択された要素の子孫である要素を取得します。 コードがあまりにも深くないと、私はこれが改善できる部分だと思います var photoPreview = $photoInput.parent().find(".preview");行。 $ photoInputは、クラス名「プレビュー」を持つ親のdivを持っている場合

、あなたは $photoInput.parent(".preview");