JQuery нацеливание и перемещение конкретных элементов один на один

Question

У меня есть HTML структура, как так:

<tr class="v65-productDisplay-row"></tr> 
<tr class="v65-productDisplay-row PriceAndButton"></tr> 
<tr class="v65-productDisplay-row PhotoLine"></tr> 
<tr class="v65-productDisplay-row"></tr> 
<tr></tr> 
<tr class="v65-productDisplay-row"></tr> 
<tr class="v65-productDisplay-row PriceAndButton"></tr> 
<tr class="v65-productDisplay-row PhotoLine"></tr> 
<tr class="v65-productDisplay-row"></tr> 
<tr></tr> 
<tr class="v65-productDisplay-row"></tr> 
<tr class="v65-productDisplay-row PriceAndButton"></tr> 
<tr class="v65-productDisplay-row PhotoLine"></tr> 
<tr class="v65-productDisplay-row"></tr> 
<tr></tr> 
...and so on 

Я пытаюсь цель каждого PriceAndButton TR и вставить его после каждого соответствующего Photoline TR. Вот код, который я до сих пор, но это не работает, как еще:

 jQuery(".PriceAndButton").each(function() { 
      var IndexValue = $(this).index(); 
      $(this).insertAfter(".PhotoLine:eq(" + IndexValue + 1 + ""); 
     }); 

Мои мысли были получить значение индекса каждого элемента PriceAndButton и вставьте его после Photoline TR, где его эк равно значение индекса + 1. Это должно работать правильно, поскольку PhotoLine TR всегда сразу после?

Answer 1

Ваш код (я установил закрывающую скобку):

".PhotoLine:eq(" + IndexValue + 1 + ")"; 

будет конкатенации в виде строки. Если IndexValue равно 3, вы получите строку .PhotoLine:eq(31) вместо .PhotoLine:eq(4). Что вы имели в виду:

".PhotoLine:eq(" + (IndexValue + 1) + ")"; 

Но даже тогда это не сработает.

Для простоты, вы можете избежать использования eq вообще путем вместо выбора .next('.PhotoLine') (или просто .next(), но мне нравится быть точным, чтобы избежать неожиданных сюрпризов):

$('.PriceAndButton').each(function(i,el) { 
    $(this).insertAfter($(this).next('.PhotoLine')); 
}); 

http://jsfiddle.net/mblase75/YWaYN/

Answer 2

Вы можете просто используйте jQuery next method следующим образом:

$(".PriceAndButton").each(function() { 
    var self = $(this); 
    self.insertAfter(self.next()); 
});