将所有实例移动到父 div jQuery 之外

debugcn 发表于 Dev

MANICX100

我如何快速移动到.btn-2018外面.uc-articles-summary。我需要将此修复应用于所有具有 class 的元素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>

理查德·帕纳比-金

我已将您的 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。