Question

如何快速将.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>

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

将所有实例移到父div jQuery外部

1 个答案: