javascript - 如何关联两个 DOM 元素？

Question

我有这个简单的 HTML 结构:

<ul>
    <li> One <p> Foo is a fool. </p> </li>
    <li> Two <p> Bar is not Barbie. </p> </li>
    <li> Three <p> Baz likes bazookas. </p> </li>
</ul>

<div id="pane"></div> 

如您所见，有一个 UL 列表。每个 LI 项目都包含一个始终隐藏的段落。

我想做的是:
每当用户单击 LI 元素时，相应的 P 元素都应转移到 #pane DIV。然后，当用户再次点击同一个 LI 元素时，P 元素应该被转移回它原来的位置。

现场演示: http://jsfiddle.net/u5y6u/1/

这是我目前使用的 jQuery 代码:

var p;

$('li').toggle(function() {
    p = $(this).find('p').appendTo('#pane');
}, function() {
    p.appendTo(this);
});

当段落位于#pane DIV 内时，局部变量p 用于存储对段落的引用。这显然只适用于一个 LI 元素，因为如果用户单击一个 LI 元素，然后立即单击另一个 LI 元素，p 变量将被新的段落引用覆盖。

这就是我想做的:
每当将 P 元素传输到 #pane DIV 时，我想以某种方式将该 P 元素与最初包含它的 LI 元素相关联，以便在再次单击 LI 时，我知道我必须传输回哪个 P 元素。

我该怎么做？

Answer 1

好吧，一种方法是使用 each 语句为每个 p 赋予它自己的范围。 See fiddle

$('li').each(function(){
    var p = $(this).find('p');

    $(this).toggle(
        function() { p.appendTo('#pane'); },
        function() { p.appendTo(this); }
    );
});