Maybe some of you had problem with some elements (divs, buttons, list items, links, images) to move them up one level, each one inside their parent element. This is very useful when you really don't have access or you can't edit the html source at all.
As here we will move element in another element, I recommend you first to read an older tutorial of mine about how to move div in another div. It will give you a little boost of knowledge to see how the things below will be handled.
Let me give you a fast example. Supposing that you have a div which gets few posts from a blog, together with post title, date and author. What about if you want to move each container with the author above their respective date container. Here is a plain html structure of what I am trying to explain:
<div class="blog-listing"> <div class="post-item"> <h4><a href="#">Lorem ipsum dolor sit amet consectetur</a></h4> <div class="post-details"> <div class="post-date">March 2, 2015</div> <div class="post-author">by Some Author</div> </div> </div> <div class="post-item"> <h4><a href="#">Lorem ipsum dolor sit amet consectetur</a></h4> <div class="post-details"> <div class="post-date">February 25, 2015</div> <div class="post-author">by Another Author</div> </div> </div> </div>
The technique is very simple. We will need to target the element you want to move using his class name (or id) and use the each function from jQuery. What each does is to look through all containers with the class "post-item" and see if "post-author" container exists and to move each author above the date container.
Full HD Video Tutorial
Move Child Element Up One Level
Supposing that you want to move the author div above the post title. To do that, you need to go up one level using the parent() function from jQuery and move the element above the post title.
Instead of moving the element using prependTo or insertBefore, which will create duplicates, we will remove the element and create it again using prepend or before functions.
Case 1 - Exact Target
Exact target means that will place the element exactly before the <h4> tag as in the script below:
$('.blog-listing .post-item .post-author').each(function() { $(this).parent().parent().find('h4').before($(this)); });
Case 2 - Relative Target
Relative target means that you will place the element by a relative location using parent() and moving the element right inside the beginning of the main container.
$('.blog-listing .post-item .post-author').each(function() { $(this).parent().parent().prepend($(this)); });
You can analyze the code of these 2 cases. The results are the same, but the problem with the case 2 is that if you add another div, the code will no longer work properly because it will navigate up 2 times in your html structure
Move Child Element in the Same Div (using Parent Container)
If you want to move child element in the same container (referring to author div) you need navigate to the parent container and insert the author div above the date container.
Case 1 - Exact Target
Move child element in the same container (using relative target):
$('.blog-listing .post-item .post-author').each(function() { $(this).parent().prepend($(this)); });
Case 2 - Relative Target
Move child element in the same container (specifying the exact target):
$('.blog-listing .post-item .post-author').each(function() { $(this).parent().find('.post-author').before($(this)); });
Conclusion
This technique is helpful when you don't have access to html source or you use some fancy CMS and you don't want to mess with the php code. Is very easy to use and this will not cause any problems at all.
Make sure to use the code if you have a similar structure with repetitive items, so you can target each item and move child element position wherever you need inside that item. Let me know if this helped you in your project. Below you can see a live example or download the files.
Using a wordpress plugin to generate real estate listings on a page and this is exactly what I needed to adjust the layout without duplicates :)
I’m very glad that my tutorial helped you! Also thank you for your donation!