Jquery 使用append创建详细信息

我试图为列表中的每个

div

创建详细信息

到目前为止，这个列表可能很长

这就是我到目前为止所做的：

例如：

html:

1
2.
3.
4.
5.
6.

js:

$（“div.pics”）.live（“鼠标悬停”，函数（）{
var$this=$（this）；
var details=“Detalhes do usuario”；
$this.next（）.append（详细信息）；
});
$（“div.pics”）.live（“mouseout”，function（）{
如果（$（“#详细信息”）。长度）{
$（“#详细信息”）.remove（）；
}
}); 

我现在有个问题，这是更好的方法吗

它不能与最后一个

div

一起使用append，我想这是因为

next（）

，我如何修复它

我有点迷路了

---

桑斯

我会在主体上创建div并绝对定位它，而不是将其附加到下一个div

您可以使用来获取悬停在上面的div的位置，并使用该位置为details div设置

top

和

left

css值

像这样的

---

考虑到Daniels的建议，因此先隐藏div，然后定位并显示它。

如果详细信息是静态信息，那么最好将其设置为“显示：无”，并仅在用户“悬停”div时显示。因为这样做成本太高。

从dom中添加和删除的成本非常高。您应该改为显示和隐藏

div

s。@丹尼尔A.怀特：谢谢，关于

.detach（）

？jQuery.live呢？就像两年前一样……您应该使用jQuery。delegate@DavidKempjQuery.delegate？就像一年前那样。。。应使用jQuery.on；）@RichardD谢谢，已经有一段时间没有做jQuery了，但是

jQuery.on

更有意义。

<div class='pics'>1</div>
<div class='pics'>2</div>
<div class='pics'>3</div>
<div class='pics'>4</div>
<div class='pics'>5</div>
<div class='pics'>6</div>

$("div.pics").live("mouseover", function(){
    var $this = $(this);
    var details = "<div id='details' style='border: solid red 1px; width: 300px; height: 300px; position: absolute;'>Detalhes do usuario</div>";
    $this.next().append(details);
});

$("div.pics").live("mouseout", function(){
    if($("#details").length){
        $("#details").remove();
    }
}); 

$("div.pics").live("mouseover", function(){
        var position = $(this).position();
        $('#details').css({top: position.top + 10, left: position.left + 110})
                     .show();        
});

$("div.pics").live("mouseout", function(){
    $('#details').hide();
});