Question

I’m using a blog template – squarespace 6, which doesn’t allow me access to the .html / and only limited access to the .css

Each time I create a blog post I add tags and a category to it – but these tags/category are placed at the bottom of the blog post. I’m trying to move them to the sidebar.

The problem is that I have multiple blog posts per page, I’m trying to use jquery to select the .tags and .category classes and move them into the .sidebarbefore the .date with code like this:

$(document).ready(function(){

var $categories = $('div.categories').parent('article');
var $spanDate =('span.date').parent('article');  

$categories.insertBefore($spanDate);

});

(this code is only the example for .categories)

The problem is this code grabs the tags/category from every blog post and applies it to every sidebar so categories and tags are getting mixed up.

I’m trying to get the code to select the .tags and .category of a parent article and then move those to the .sidebar of the same parent article.

I can’t use any specific ID’s because I want this to apply to every blog post – but the tags/category need to stay within that post.

There is a lot of injected code but the basic structure of the HTML is as follows:

<blog>  //Wrapper for the whole blog page
<content>
<article> //Each article is a blog entry
  <section class="main"> //Contains the contents of the blog entry. This also has a dynamically generated ID, 
    //Blog Entry Content Goes Here
    <footer>
      <div class="meta"> //Contains the tags/categories I try to pull out of the DOM
        <span class="tags"></span> //Contains the tags each wrapped in an `<a>`
        <span class="categories"></span> //Contains the category tags
      </div>
    </footer>
   </section>
   <section class="sidebar"> //This is where I'm trying to place the tags/categories
     <span class="date"></span> //I try to place the category before this in the jquery code above
     <more spans....> // I try to place the tags appended onto the end of the sidebar (code not shown above).
   </section>
</article>
<article></article> //More blog entries with same structure
<article></article> //More blog entries with same structure
<article></article> //More blog entries with same structure
</content>
</blog>

Answer 1

If I’m understanding you right, this should do:

$('div.categories').each(function(){
    var $this = $(this);
    var $date = $this.closest("article").find(".date");

    $this.insertBefore($date);
});

The key is that for each .categories I find the related .date rather than all .dates. Also, your code shouldn’t do anything at all with the supplied html. Neither your .categories or your .date has a direct parent of article.