jQuery navigation assistance

Question

Updated to fix the markup issue :/

http://jsfiddle.net/G7p2U/1/ that is the link to better understand everything

jQuery I am using is

$(document).ready( function() {
  $(".crumbs a").each( function() {
    $(this).append('<div class="indicator"></div>');
  });
var i = 0;
var linkpos= new Array("0,0", "0,110", "0,220", "0,330", "0,440", "0,550", "0,660");
    $(".crumbs").each( function() {
 var s = linkpos[i];
 var x = s.split(",");
 var t = x[0];
 var l = x[1];
$(this).css({ "top":t+"px", "left":l+"px" });
 i++;
 }); 
});

Problem is that when this was written it worked correctly, now there is the issue. Before the markup was like so

 <div class="pun-crumbs">
    <div class="crumbs">
     <a href="#">Index</a>
   </div>
  <div class="crumbs">
     <a href="#">Profile</a>
  </div>
     <div class="crumbs">
       <a href="#">Recent</a>
    </div>
    <div class="crumbs">
      <a href="#">Link 4</a>
   </div>
 </div>​

Though that is not how the PHP parse's the data markup it actually comes out like so

 <div class="pun-crumbs">
   <div class="crumbs">
     <a href="#">Index</a>
      <a href="#">Profile</a>
        <a href="#">Recent</a>
         <a href="#">Link 4</a>
      </div>
    </div>​

So my trouble is now for some reason I can not get the links to separate like I need them too..

should look like so http://jsfiddle.net/nXrDn/

Any help?

​

Answer 1

http://jsfiddle.net/G7p2U/12/

$(document).ready( function() {
$(".crumbs").addClass("crumby").removeClass("crumbs")
$(".crumby a").wrap('<div class="crumbs" />');
$(".crumbs a").each( function() {
//rest of code

Answer 2

jsFiddle Demo

You can reproduce your original markup starting from the new HTML by running the following script to prepare the elements:

$(".crumbs > a").unwrap();
$(".pun-crumbs > a").wrap("<div class='crumbs' />");

All you have to do is put this first in your document ready handler, before your current code, as shown in the demo.

This is pretty intuitive: it removes the .crumbs div (unwraps its children), then wraps each one in a new .crumbs div.