Переместить все экземпляры за пределы родительского div jquery

Как быстро переместить .btn-2018 за пределы .uc-articles-summary. Мне нужно применить это исправление ко всем элементам с классом btn-2018.

Моя попытка исправить

$('.btn-2018').each(function() {
  var $btn2018 = $('.uc-articles-summary > .btn-2018');
  $(this).parent().after($btn2018);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="uc-articles-summary">
  <p>
    &nbsp; Platform magazine has been shortlisted for two national awards after...
  </p>
  <a class="btn-2018" title="Platform shortlisted for two national awards ..." href="/articles/platform-shortlisted-for-two-national-awards">read more »</a>
</div>
<div class="uc-articles-summary">
  <p>
    &nbsp; Another article explaining how to...
  </p>
  <a class="btn-2018" title="Platform shortlisted for two national awards ..." href="/articles/platform-shortlisted-for-two-national-awards">read more »</a>
</div>
<div class="uc-articles-summary">
  <p>
    &nbsp; You are braver than you believe, stronger than you feel, and...
  </p>
  <a class="btn-2018" title="Platform shortlisted for two national awards ..." href="/articles/platform-shortlisted-for-two-national-awards">read more »</a>
</div>

Не могли бы вы объяснить, что вы имеете в виду, говоря «переместить .btn-2018 за пределы .uc-articles-summary»?

Milan Chheda 10.09.2018 11:30

Так что не так с вашим кодом?

Justinas 10.09.2018 11:34

@Justinas - похоже, что jQuery добавит ВСЕ кнопки после текущего родителя кнопок. Это только выглядит работающим, потому что есть только одна кнопка банкомата.

Richard Parnaby-King 10.09.2018 11:36

Я добавил дополнительные div к вопросу, чтобы проиллюстрировать, что, по моему мнению, происходит.

Richard Parnaby-King 10.09.2018 11:52
0
4
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я изменил ваш javascript на:

var $btn2018 = $(this);
$btn2018.closest('.uc-articles-summary').after($btn2018);

Таким образом, вы указываете jQuery переместить текущий элемент после его собственного предка. Я использую .closest на случай, если ваша кнопка где-то глубоко вложена. Если кнопка всегда будет непосредственным потомком .uc-articles-summary, вы можете заменить ее на .parent.

$('.btn-2018').each(function() {
  var $btn2018 = $(this);
  $btn2018.closest('.uc-articles-summary').after($btn2018);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="uc-articles-summary">
  <p>
    &nbsp; Platform magazine has been shortlisted for two national awards after...
  </p>
  <a class="btn-2018" title="Platform shortlisted for two national awards ..." href="/articles/platform-shortlisted-for-two-national-awards">read more »</a>
</div>
<div class="uc-articles-summary">
  <p>
    &nbsp; Another article explaining how to...
  </p>
  <a class="btn-2018" title="Platform shortlisted for two national awards ..." href="/articles/platform-shortlisted-for-two-national-awards">read more »</a>
</div>
<div class="uc-articles-summary">
  <p>
    &nbsp; You are braver than you believe, stronger than you feel, and...
  </p>
  <a class="btn-2018" title="Platform shortlisted for two national awards ..." href="/articles/platform-shortlisted-for-two-national-awards">read more »</a>
</div>

Другие вопросы по теме