Archived topic
Reorder div elements with jQuery
5 replies · Started by George on July 12, 2019
I am trying to reorder two div elements in a template that get generated by a plugin. I insert
<script>
(function($) {
jQuery('.class2').insertBefore('.class1');
}) ( jQuery );
</script>through a hook element at wp_footer but it doesn't seem to work. I have also tried it in wp_header. I don't see any errors in the console, either. Is that the correct way of doing it?
Hi there,
ideally scripts go in the footer so they are executed after the elements are loaded. Can't see an issue with the script - i tested this on a clean GP install to move the content above the nav:
(function($) {
$('.container').insertBefore('.main-navigation');
}) ( jQuery );So it may be a specificity issue you're having ie. are those element classes unique.
The divs exist in a modal that loads the whole content. Could that be an issue?
Most probably - if the modal content is being called by ajax or another script then those elements won't exist when the script is executed.
Is there anything I can do to intercept the ajax click? I have modified my first post to include a URL. The modal will appear when you click on one of the portfolio items.
I believe you would need to use an event handler to execute yours script - so when the element is clicked or the ajax modal is loaded. This stack overflow goes into some detail on that:
https://stackoverflow.com/questions/16062899/jquery-doesnt-work-after-content-is-loaded-via-ajax
