найти изображение из текста и добавить к div - PullRequest
Новая
       26

найти изображение из текста и добавить к div

0 голосов
/ 24 августа 2010

У меня проблемы с поиском изображения внутри div и добавлением его в пустой div. Вот код, который у меня есть: 

<div class="newsItem">
  <div class="newsImage"></div>
  <h2><a href="">Latest News 03</a></h2>
  <div class="newsIntro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce  dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus  neque, condimentum nec, auctor eget, semper ut, enim. Vestibulum sem  tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim  justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat  metus id lacus. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.  Morbi quis nulla.</div>
  <div class="clear"></div>
</div>
<div class="newsItem">
  <div class="newsImage"></div>
  <h2><a href="">Latest News 03</a></h2>
  <div class="newsIntro"><img src="/images/stories/img_abopal3.jpg" border="0" alt="Opal History" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus neque, condimentum nec, auctor eget, semper ut, enim. Vestibulum sem tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat metus id lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.</div>
  <div class="clear"></div>
</div>
<div class="newsItem">
  <div class="newsImage"></div>
  <h2><a href="">Latest News 02</a></h2>
  <div class="newsIntro"><img src="/images/stories/img_abopal6.jpg" border="0" alt="Opal History" align="right" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dictum sagittis sapien. Aliquam erat volutpat. Nulla facilisi. Ut purus neque, condimentum nec, auctor eget, semper ut, enim. Vestibulum sem tellus, vestibulum a, vehicula ut, feugiat id, libero. Pellentesque enim justo, condimentum sed, dictum at, viverra eget, odio. Aliquam feugiat metus id lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam iaculis iaculis quam. Donec eu dui.</div>
  <div class="clear"></div>
</div>

Вот jQuery: 

jQuery(".newsItem").each(function() {
  var thumbImage = jQuery(this).find(".newsIntro img");
  jQuery(thumbImage).appendTo(".newsImage");
});

Я могу заставить его найти изображения, но, похоже, не могу заставить его правильно разместить их, в настоящее время изображения повторяются внутри элемента newsImage .. Если бы кто-то мог указать мне правильное направление, это было бы здорово :)

Приветствия

1 Ответ

1 голос
/ 24 августа 2010

Я думаю, это то, что вам нужно: 

jQuery(".newsItem").each(function() {
  var thumbImage = jQuery(this).find(".newsIntro img");
  jQuery(thumbImage).appendTo(jQuery(this).find(".newsImage"));
});

Вы можете попробовать здесь или немного другой подход: 

jQuery(".newsImage").each(function() {
  $(this).append($(this).siblings('.newsIntro').find('img'));
});

Вы можете проверить это здесь .Если вы не хотите перемещать <img>, просто добавьте .clone() к части изображения, например, .find('img').clone() во второй.

...