jquery - 如何缓存每个列表项子元素以供以后使用？

Question

我想缓存和分离每个列表项“div.title” onload。

根据单击功能（view1 或 view2），“div.title”将再次附加到正确的列表项。

当前尝试： http: //jsfiddle.net/nolfranklin/KxXcd/7/（所有标题都附加到最后一个列表项）

<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

尝试这个

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

    // Reattach title to each list item.

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

});

检查小提琴

此处的标题包含两个 jQuery 对象，您将在 li.. 末尾附加 objectList

您需要遍历将它们附加到 li 的标题。

Answer 2

.detach同时分离所有元素并将它们存储在一个集合中。

有几种方法可以从集合中获取特定索引，例如括号[index]或.get：

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

http://jsfiddle.net/ExplosionPIlls/KxXcd/12/