Question

Basically I need to figure out a jQuery function that will count how many dd’s there are and append one corresponding link with the appropriately numbered hash to the #external-navigation div.

The html structure should wind up like this:

<dl id="slider">
    <dd>
    </dd><!--slide one-->

    <dd>
    </dd><!--slide two-->

    <dd>
    </dd><!--slide three-->
</dl>

<div id="external-navigation">
    <a href="#1">Slide One</a>
    <a href="#2">Slide Two</a>
    <a href="#3">Slide Three</a>
</div>

I’m assuming this would use something like $(‘dd’).each(function(i){ });…?

Answer 1

You’re on the right track:

$('#slider dd').each(function(i,el) {
    var n = i+1;
    $('#external-navigation').append('<a href="#slide'+n+'">Slide '+n+'</a> ');
});

http://jsfiddle.net/mblase75/NNWsD/1/

http://api.jquery.com/each/

(You aren’t supposed to start an ID with a number, and you shouldn’t start a name with a number.)