jquery-通過hover控制表格td內容的顯示和隱藏

通過hover控制表格td內容的顯示和隱藏

這兒我建立了5個父div，id分別是
box0 box1 box2 box3 box4

和5個子div ， id分別是
personalInfo0 personalInfo1 personalInfo2 personalInfo3 personalInfo4

當我的鼠標移動到box0的時候，我想顯示personalInfo0，但不想顯示其他的personalInfo。
以此類推，當鼠標移動到boxn的時候，就顯示personalInfon。
請問該如何實現...?

下面是我建立表格的關鍵語句。

for(var i=0;i<len;i++){
    var tempStr="";
 tempStr+="<tr><td>"+tempDaTa[i].id+"</td><td>"+tempDaTa[i].content+"</td><td><div id='box"+i+"'>"+tempDaTa[i].nickname+"<br/>"
                    +"<div id='personalInfo"+i+"' style='display:none'>"+tempDaTa[i].camper+"-"+tempDaTa[i].major+"-"+tempDaTa[i].grade+"</div></div></td></tr>";
        $tbody.append(tempStr); 
        }

最佳回答：

jquery代碼：

$("div[id^='box']").each(function(index,domEle){
    var _index=index;
    $(this).mouseenter(function(){
        $('#personalInfo'+_index).show();
    });
    $(this).mouseleave(function(){
        $('#personalInfo'+_index).hide();
    })
})