가장 가까운 div에 img를 첨부하십시오.

Question

나는 저를 위해 작동하는 해결책을 찾으려고 몇 시간 동안 웹을 수색했으나 방금 찾을 수없는 것 같습니다.

# blog-banner-container로 이동하려면 이미지 ([alt="post-banner"])가 필요합니다. 문제는 그 alt를 가진 모든 이미지가 첫 번째 div로 이동한다는 것입니다. 내가 .closest()을 사용해야한다고 생각하지만 사용법을 모르겠습니다.

jQuery를

$('[alt="post-banner"]').appendTo('#blog-banner-container'); 

HTML

<div class="blog-entry"> 
     <div id="blog-banner-container"></div> 
     <div class="blog-entry-title">Title</div> 
     <div class="blog-entry-body"> 
      <img src="#" alt="post-banner" /> 
     </div> 
    </div> 

    <div class="blog-entry"> 
     <div id="blog-banner-container"></div> 
     <div class="blog-entry-title">Title</div> 
     <div class="blog-entry-body"> 
      <img src="#" alt="post-banner" /> 
     </div> 
    </div> 

    <div class="blog-entry"> 
     <div id="blog-banner-container"></div> 
     <div class="blog-entry-title">Title</div> 
     <div class="blog-entry-body"> 
      <img src="#" alt="post-banner" /> 
     </div> 
    </div> 

Answer 1

당신은 부모, 당신이 찾고있는 ID와 수준에서 그 형제를 선택할 수 있습니다.

jsFiddle

HTML

<div class="blog-entry"> 
     <div id="blog-banner-container"></div> 
     <div class="blog-entry-title">Title</div> 
     <div class="blog-entry-body"> 
      <img src="#" alt="post-banner" /> 
     </div> 
    </div> 

    <div class="blog-entry"> 
     <div id="blog-banner-container"></div> 
     <div class="blog-entry-title">Title</div> 
     <div class="blog-entry-body"> 
      <img src="#" alt="post-banner" /> 
     </div> 
    </div> 

    <div class="blog-entry"> 
     <div id="blog-banner-container"></div> 
     <div class="blog-entry-title">Title</div> 
     <div class="blog-entry-body"> 
      <img src="#" alt="post-banner" /> 
     </div> 
    </div> 

자바 스크립트

$('[alt="post-banner"]').each(function() { 
    $(this).parents().siblings('#blog-banner-container').append(this); 
});