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

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

Мне нужно изображение ([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>

источник

2013-08-11 Jeremy Blazé

Я заметил, у вас есть три 'div' элементов с одинаковым идентификатором' блог-баннер-container'. Было ли это намеренно? Это приведет к нежелательным эффектам. – Shaun

@Shaun Поскольку это для темы RapidWeaver, у меня нет возможности редактировать div, и мне даже пришлось использовать '.prepend()', чтобы отобразить '# blog-banner-container' –

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

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); 
});

источник

2013-08-11 06:11:14

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

ответ

Смежные вопросы