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]);
    });

});

<强> Check Fiddle

title这里包含两个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/

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

2 个答案: