JQuery, как вы удалите элемент из местоположения место в другом и повторите х раз

Question

Я пытаюсь удалить первое изображение ссылки под h4 и добавить его к div.image-thumb.Код, который я использую, работает хорошо, если это всего лишь одна строка таблицы ".tr-class".

Но когда у меня несколько строк, он копирует все изображение ссылки в .image-thumb.Так что, если у меня есть 10 строк, то в каждой строке будет по 10 ссылок.Как я могу получить только правильное изображение ссылки в нужном месте HTML и JS ниже:

Спасибо

<table>
<tr class="tr-class">
<td class="left-td">
    <div class="image-thumb">
    </div>
</td>
<td class="right-td">
    <h4>Header</h4>
    <a href="http://www.google.com"><img src="image.png" /></a>
    <p>this is my content</p>
    <a href="http://www.google.com">Read more</a>                
</td>       
</tr>

for(i = 0; i < 10; i++){
    $(".tr-class").eq(i).each(function(){
        var getImage = $(".tr-class .right-td h4").next().eq(i);
        $(getImage).prependTo(".tr-class .image-thumb");
    });
}

Answer 1

Попробуйте это:

$('.tr-class')
  .each(
    function()
    {
      $('.right-td h4 + a', this).appendTo($('.image-thumb', this));
    }
  );

Answer 2

Я не уверен, насколько это эффективно, но, похоже, это работает:

$(document).ready(
    function(){
        $('img').each(
            function(i){
                $(this).prependTo($('.image-thumb').eq(i));
            }
        );
    }
);

Демонстрация в JS Bin

Сделанные предположения:

1. То, что на .tr-class будет только одно изображение, вероятно, будет более надежным, если вы назначите класс изображениям.