移動元素的DOM位置選擇的每個循環中的jQuery

Question

所以我有一個新聞供稿此DOM結構

<div class="content"> 
    <div class="row"> 
     <h2 class="date">01 July 2015</h2> 
     <div class="thumbnail"> 
      <img src="somesource"> 
     </div> 
     <div class="description"> 
      <a href="#link">link</a> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est! 
     </div> 
    </div> 
</div> 

//duplicated 5 times 

我想h2.date和我jQuery代碼是這樣的前搬遷的鏈接：

$('.content .row .description').each(function() { 
    var hrefs = $('a', this); 
    hrefs.insertBefore('.content .row h2.date'); 
}); 

非但沒有它的鏈接而已，它不斷從其他消息也傾倒所有的鏈接：

<div class="content"> 
    <div class="row"> 
     <a href="#link">link</a> 
     <a href="#link2">link from news 2</a> 
     <a href="#link3">link from news 3</a> 
     <a href="#link4">link from news 4</a> 
     <a href="#link5">link from news 5</a> 
     <h2 class="date">01 July 2015</h2> 
     <div class="thumbnail"> 
      <img src="somesource"> 
     </div> 
     <div class="description"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est! 
     </div> 
    </div> 
</div> 

任何想法如何解決這個問題？

Answer 1

你.insertBefore()選擇沒有上下文，所以你的元素插入的第一要素的選擇是否匹配：通過

$('.content .row .description').each(function() { 
    var hrefs = $('a', this), 
     $target = $(this).closest('.content').find('.row h2.date'); 
    hrefs.insertBefore($target); 
}); 

JSFiddle

或者避免遍歷了 DOM樹，代替循環.content：

$('.content').each(function() { 
    var $this = $(this), 
     $href = $this.find('a'), 
     $target = $this.find('.row h2.date'); 
    $href.insertBefore($target); 
}); 

JSFiddle