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

你可以

使用ID的命名约定： li 具有与 p 相同的ID以及 li - 前缀
将p id存储在li的数据属性中
为每对li / p使用相同的 css类

Answer 2

您可以使用data()^(docs)方法和/或jQuery.data()^(docs)方法为每个<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提供自己的范围。 See fiddle

$('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/

鲍勃

如何关联两个DOM元素？

4 个答案: