如何关联两个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);
});

局部变量p在#pane DIV中时，用于存储对该段落的引用。 显然，这仅适用于一个LI元素，因为如果用户单击一个LI元素，然后紧接着又单击另一个LI元素，则p变量将被新的段落引用覆盖。

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

我该怎么做？

Answer 1

你可以

1. 对id使用命名约定： li具有与p相同的id加上li-前缀

2. 将p id存储在li的data-属性中

3. 对每对li / p使用相同的CSS类

Answer 2

method and/or the jQuery.data() method to give each <li> element a reference to its <p> element. 您可以使用data() 方法和/或jQuery.data() 方法为每个<li>元素提供对其<p>元素的引用。

http://jsfiddle.net/u5y6u/3/

$('li').each(function() {
    var $th = $(this);
    $th.data('relatedP', $th.find('p'));
})
.toggle(function() {
    $.data(this,'relatedP').appendTo('#pane');
}, function() {
    $.data(this,'relatedP').appendTo(this);
});

Answer 3

嗯，一种可行的方法是使用each语句赋予每个p自己的范围。 见小提琴

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

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

Answer 4

如果您可以将动态内容放在“窗格” div中并切换可见性，则逻辑会变得更加简单。 这是一个例子：

http://jsfiddle.net/rcravens/u5y6u/4/

短发