descriptive div to my links

Question

I'm trying to add a extra descriptive div to my links. The div should get it's information from the li a title attribute.

I'm able to get the title attribute but how do I pass it on to the div .omschrijving?

$("#sidebar li ").append("<div class='omschrijving'></div>");
$("#sidebar li a").each(function(){
    var hoverText = $(this).attr("title");
    $(this).text(hoverText);
});

Thank you in advance.

Answer 1

I'd grab the parent li, then find the div that you've just added and set it's text.

$("#sidebar li ").append("<div class='omschrijving'></div>");
$("#sidebar li a").each(function(){
    var hoverText = $(this).attr("title");
    $(this).closest('li').find( 'div.omschirjving' ).text(hoverText);
});

You might also think about combining these into a single method.

$('#sidebar li').each( function() {
    var title = $(this).find('a').attr('title');
    $("<div class='omschrijving'>" + title + "</div>").appendTo(this);
});