2015-07-19 2 views
0

Так что у меня этот DOM структуру для лентыперемещение позиции РОМ элемента в каждой петле селектора в JQuery

<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> 

Любая идея, как это исправить?

ответ

0

Ваш селектор .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

+1

только начинал ответ, предлагая также чередовать внешние элементы. Делает для меня больше всего смысла – charlietfl

+0

hmmm, все еще не работает. Он все еще возвращает связку ссылок до 'h2' из других новостей. В любом случае, здесь есть фактическая ссылка на сайт, вы можете посмотреть, что происходит: http://fas.srmconsultancy.org Раздел под кнопкой «Просмотреть все новости». Они извлекают содержимое с внешнего сайта, поэтому мне нужно переделать разметку для меня, чтобы она могла легко стилизовать ее. –

+0

Можете ли вы воспроизвести проблему в [онлайн-демонстрации] (http://www.jsfiddle.net)? – George

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