Question

I have a problem in jQuery, it is that I have an array to append to an object (id) This function also after intends such as.

When I now use a “each” function in jQuery do I do it this way.

$.each(childrenObj, function(index, value) 
{
    $( document.createElement('ol') )
    .append(
        $( document.createElement('li') )
        .attr('id', 'list_'+ listItem )
        .append(
            $( document.createElement('div') )
            .addClass('listContentItem')
            .html( value.contentTitle )
            )
        )
    .appendTo('#list_'+ ( listItem - 1 ) );

    listItem++;
});

As you would imagine, it will make a <ol><li>test</li></ol> where after doing the same thing over and over again depending on how many people run through.

That I would like is that I would like it to make a <ol> in an object after which I in my each loop adds <li> to it and eventually make a appendTo (‘# id’) after my desire but could not quite get it resolved and it causes some problems pure design front.

Hope there are some who sits with a solution and can help me a little on the road.

Answer 1

Create the ol outside your loop (below code is untested, but should hopefully work)

var ol = $( document.createElement('ol') );
$.each(childrenObj, function(index, value) 
{

    ol.append(
        $( document.createElement('li') )
        .append(
            $( document.createElement('div') )
            .addClass('listContentItem')
            .html( value.contentTitle )
            )
        );
});

ol.appendTo('#some_id');