jQuery - insertAfter失效

Question

我正试图使用#whatsOnLink将jQuery移到"Get a Quote“按钮下面，而在jQuery方面，我遇到了麻烦。如果我从目标中移除.button的额外部分，那么它将很好地移动，但我需要它进入保持div。

​

$('div[class^="grid"] a#whatsOnLink').each(
  function() {
    $(this).insertAfter($(this).closest('div[class^="grid_3"] div .button'));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="grid_3 alpha omega selected cheapest">
  <div class="cheapest-body">

    <div class="cheapest-heading">
      <p>BEST VALUE</p>
    </div>

    <a id="whatsOnLink" href="">Test</a>

    <p class="latest-type">Silver apartment
      <br>from <span class="latest-offer-price">£75</span>  <span>pp</span>  <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
    </p>

    <a class="button bookingEngine button-red" href="">
      <span>Get A Quote</span>
    </a>

    <img src="" class="grey-out-overlay">

  </div>
</div>

​

任何帮助都是非常感谢的。

你好，基兰

Answer 1

使用这个

$(this).closest('div[class^="grid_3"]').find('div .button')

而不是

$(this).closest('div[class^="grid_3"] div .button')

​

$(document).ready(function() {

  $('div[class^="grid"] a#whatsOnLink').each(
    function() {
      $(this).insertAfter($(this).closest('div[class^="grid_3"]').find('div .button'));
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="grid_3 alpha omega selected cheapest">
  <div class="cheapest-body">

    <div class="cheapest-heading">
      <p>BEST VALUE</p>
    </div>

    <a id="whatsOnLink" href="">Test</a>

    <p class="latest-type">Silver apartment
      <br>from <span class="latest-offer-price">£75</span>  <span>pp</span>  <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
    </p>

    <a class="button bookingEngine button-red" href="">
      <span>Get A Quote</span>
    </a>

    <img src="" class="grey-out-overlay">

  </div>
</div>

​

Answer 2

你可以用.next()

$('div[class^="grid"] a#whatsOnLink').each(function() {
  $(this).insertAfter($(this).next().next());

  // OR

  // $(this).appendTo($(this).parent());
});

​

$('div[class^="grid"] a#whatsOnLink').each(function() {
  $(this).insertAfter($(this).next().next());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid_3 alpha omega selected cheapest">
  <div class="cheapest-body">

    <div class="cheapest-heading">
      <p>BEST VALUE</p>
    </div>
    <a id="whatsOnLink" href="">Test</a>
    <p class="latest-type">Silver apartment
      <br>from <span class="latest-offer-price">£75</span>  <span>pp</span>  <a class="lightbox lightbox-accomodation-more-info lightbox-added" href="/accommodation-overlays/bognor-regis-silver-apartment.aspx"><span>More Information</span></a>
    </p>
    <a class="button bookingEngine button-red" href="">
      <span>Get A Quote</span>
    </a>
    <img src="" class="grey-out-overlay">
  </div>
</div>

​