javascript - 查找一个元素并将其移动到另一个元素下方

Question

我想将一个元素 .nav.item 包含 a href 文本“我的愿望 list ”移动到下面的 div #move-below-this ，大致是这样的:

$(".nav.item").insertAfter("#move-below-this");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div id="move-below-this"></div>
</div>
<ul class="nav items">
  <li class="nav item current"><strong>Account Dashboard</strong></li>
  <li class="nav item"><a href="http://testa.dev/sales/order/history/">My Orders</a></li>
  <li class="nav item"><a href="http://testa.dev/downloadable/customer/products/">My Downloadable Products</a></li>
  <li class="nav item"><a href="http://testa.dev/wishlist/">My Wish List</a></li> <!--I want to move this element -->
  <li class="nav item">
    <span class="delimiter"></span>
  </li>
  <li class="nav item"><a href="http://testa.dev/customer/address/">Address Book</a></li>
  <li class="nav item"><a href="http://testa.dev/customer/account/edit/">Account Information</a></li>
  <li class="nav item"><a href="http://testa.dev/vault/cards/listaction/">Stored Payment Methods</a></li>
  <li class="nav item"><a href="http://testa.dev/paypal/billing_agreement/">Billing Agreements</a></li>
  <li class="nav item">
    <span class="delimiter"></span>
  </li>
  <li class="nav item"><a href="http://testa.dev/review/customer/">My Product Reviews</a></li>
  <li class="nav item"><a href="http://testa.dev/newsletter/manage/">Newsletter Subscriptions</a></li>
</ul>

Answer 1

您可以使用 :contains() 选择器根据文本内容查找元素。

但是，在这种情况下，您需要确保您移动的 li 在移动后仍包含在 ul 中，以保持您的 HTML 有效。为此，您可以使用 wrap().parent()，如下所示:

$('.nav.item:contains("My Wish List")').wrap('<ul />').parent().insertAfter('#move-below-this');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div id="move-below-this"></div>
</div>
<ul class="nav items">
  <li class="nav item current"><strong>Account Dashboard</strong></li>
  <li class="nav item"><a href="http://testa.dev/sales/order/history/">My Orders</a></li>
  <li class="nav item"><a href="http://testa.dev/downloadable/customer/products/">My Downloadable Products</a></li>
  <li class="nav item"><a href="http://testa.dev/wishlist/">My Wish List</a></li> <!--I want to move this element -->
  <li class="nav item">
    <span class="delimiter"></span>
  </li>
  <li class="nav item"><a href="http://testa.dev/customer/address/">Address Book</a></li>
  <li class="nav item"><a href="http://testa.dev/customer/account/edit/">Account Information</a></li>
  <li class="nav item"><a href="http://testa.dev/vault/cards/listaction/">Stored Payment Methods</a></li>
  <li class="nav item"><a href="http://testa.dev/paypal/billing_agreement/">Billing Agreements</a></li>
  <li class="nav item">
    <span class="delimiter"></span>
  </li>
  <li class="nav item"><a href="http://testa.dev/review/customer/">My Product Reviews</a></li>
  <li class="nav item"><a href="http://testa.dev/newsletter/manage/">Newsletter Subscriptions</a></li>
</ul>