Question

I’m having some trouble with what I thought would be a simple problem.

I’d like to automate the creation of anchor links for a series of blog posts – I’ve been trying to use the each() command to loop through children in the parent div but I just can’t get it working properly and am now so confused I don’t know what I’m doing. ((@_@))

The blog content is structured like so:

<div id="content">
 <div class="list-journal-entry-wrapper">
  <div class="post-text">
    <div id="item101" class="journal-entry">...</div>
   </div><div class="post-text">
    <div id="item102" class="journal-entry">...</div>
   </div><div class="post-text">
    <div id="item103" class="journal-entry">...</div>
   </div>
  </div>
 </div>
</div>

What I want to do is use the unique item number (id="item101") for each .journal-entry post to create a list of anchor links, like this:

<div id="news-links">
  <a href="#item101">Post 101</a><br/>
  <a href="#item102">Post 102</a><br/>
  <a href="#item103">Post 103</a><br/>
</div>

I’m having trouble finding the id="xxxxx" for each post:

Once I have that id, it should be pretty simple to write out anchor links using the id value as the href

<a href="#xxxxx">Post xxxxx</a>

I’d really appreciate an example so I can get my head around the each() command.

Or is there a better way to do this?

---

Solved! Thanks to examples from adeneo and theCodeParadox, I managed to learn a few things in the process and took a little from both solutions – in the interest of assisting others, here is my final completed solution as was used for my specific application:

http://jsfiddle.net/mDSWE/3/

Note there are additional divs in the actual HTML and the final jQuery routine looks for the article title h2.title to use as the link text and then using the parents() function, finds the id attribute of the first wrapper div id="item12345" which it uses for the anchor links href.

$('h2.title a').each(function() {
   var el = $(this);
    var id = el.parents('div.journal-entry:first').attr('id');
   var insert = '<a href="#' + id + '">' + el.text() + '</a></br>';
   $('#news-anchors').append(insert);
});

Working beautifully, so thank you for taking the time to help me out.

Answer 1

var newsLinks = '<div id="news-links">';

$(".journal-entry").each(function(index, item) {
    newsLinks += '<a href="#'+item.id+'">Post '+item.id.replace('item', '')+'</a><br/>';
});

newsLinks += '</div>';

FIDDLE

It can also be done like so:

var newsLinks = '<div id="news-links">';

$.each($(".journal-entry"), function() {
    newsLinks += '<a href="#'+this.id+'">Post '+this.id.replace('item', '')+'</a><br/>';
});

newsLinks += '</div>';

FIDDLE