Question

I’d like to cache and detach each list item “div.title” onload.

Depending on a click function (view1 or view2) the “div.title” would then append to the correct list item again.

Current attempt: http://jsfiddle.net/nolfranklin/KxXcd/7/ (all titles are appending to last list item)

<code>

    <!-- list items -->

    <li class="item-1">
        <img src="image.jpg" />
        <div class="title">Theme One</div>
    </li>
    <li class="item-2">
        <img src="image.jpg" />
        <div class="title">Theme Two</div>
    </li>

/* Cache list items .title */

var title = $('ul').find('.title').detach();

$('a').click(function() {

        // Reattach title to each list item.

        $('ul li').each(function() {
            $(title).appendTo(this);
        });

});

</code>

Answer 1

Try this

$('a').click(function() {

    // Reattach title to each list item.

    $('ul li').each(function(i) {
        $(this).append(title[i]);
    });

});

Check Fiddle

title here contains two jQuery objects you are appending the objectList at the end of the li..

You need to iterate over the title which you attach them to the li.