找到一个元素并将其移动到另一个元素下面

Question

我想移动包含.nav.item的元素a href和文本＆＃34;我的愿望清单＆＃34;低于div #move-below-this，大致如下：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

但是，在这种情况下，您需要确保移动li移动后ul仍然包含在wrap().parent()中，以保持您的HTML有效。为此，您可以使用$('.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>

animate