Приложите img к ближайшему div

Question

Я часами прочесываю веб, пытаясь найти решение для этого, которое работает на меня, но я просто не могу найти его.

Мне нужно изображение ([alt="post-banner"]), которое нужно переместить в # blog-banner-container. Проблема в том, что все изображения с этим 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

Вы можете выбрать родительский, затем брат на уровне с идентификатором вы ищете.

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> 

Javascript

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