CODEWITHSUNDEEP
javascriptjqueryhtml
Shell Suite
Shell Suite

Reputation: 690

Find an element and move it below another element

I want to move an element .nav.item which contains a href with text "My Wish List" to below div #move-below-this, roughly like 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>

Upvotes: 3

Views: 72

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use the :contains() selector to find an element by it's text content.

However, in this case you need to ensure that the li you move is still contained in a ul after it's moved to keep your HTML valid. To do that you can use wrap().parent(), like this:

$('.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>

Upvotes: 3

Related Questions