我希望當我通過鼠標在Li上時，結果顯示在div

Question

我希望當我通過鼠標通過Li時，結果顯示在div中。

<li ><a href="#estaEm">Pai 1</a> 
    <ul> 
    <li ><a href="#estaEm" >Filho 1</a></li> 
    <li ><a href="#estaEm" >Filho 2</a></li> 
    </ul> 
</li> 
<li ><a href="#estaEm">Pai 2</a> 
    <ul> 
    <li><a href="#estaEm" >Filho 1</a></li> 
    </ul> 
</li> 
</div> 
<div id="estaEm" value ="">resultado </div> 

jQuery的，我沒有的情況下不工作只給父親2：

$("li").bind("mouseover", function() { 
    var result='' 

    $(this).find("a").each(function() { 
     result += " > " + $(this).text() 
    }); 

    $("#estaEm").text(result) 
}); 

設置鼠標在兒子2：兒子2

Answer 1

例如父親1>從我的理解您需要顯示當前元素鏈接及其父項鍊接（如果適用）。
於是我想出了下面的代碼：

var findLinkText = function(ele) { 
 
    return $(ele).find('a:first').text(); 
 
} 
 

 
$("li").on("mouseover", function(event) { 
 
    event.stopPropagation(); // for embeded <li> event 
 
    var result = []; 
 
    // Find this element link 
 
    var text = findLinkText(this); 
 
    if (text) result.push(text); 
 

 
    $(this).parents("li").each(function() { 
 
    var txt = findLinkText(this); 
 
    if (txt) result.unshift(txt); 
 
    }); 
 

 
    $("#estaEm").text(result.join(' > ')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div> 
 
    <li><a href="#estaEm">Pai 1</a> 
 
    <ul> 
 
     <li><a href="#estaEm">Filho 1</a></li> 
 
     <li><a href="#estaEm">Filho 2</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#estaEm">Pai 2</a> 
 
    <ul> 
 
     <li><a href="#estaEm">Filho 1</a></li> 
 
    </ul> 
 
    </li> 
 
</div> 
 
<div id="estaEm" value="">resultado </div>

Answer 2

看起來你已經解決了這一點，但如果你有興趣以另一種方式做到這一點，你可以看看這樣的：

$("li").on('mouseover', function() { 
    $("#estaEm").text(GetAnchorTextFromCurrentElement.call(this)); 
}); 

function GetAnchorTextFromCurrentElement() { 
    return $(this).find('a').map(function(){ 
     return $(this).text(); 
    }).get().join(" > "); 
} 

的map函數將數組中的每個項目，並創建相同長度的新數組返回值可以在功能指定p屁股map功能。從技術上講，你需要調用get函數來訪問數組，因爲這個特定版本的map返回一個JQuery對象，但我離題了。

一旦你有了數組，你只需要將數組中的每一項與你想要的字符串連接起來，你就可以得到你的最終結果並顯示在你的div中。

由於我們在GetAnchorTextFromCurrentElement函數中使用this關鍵字，所以我們必須使用call方法執行函數。如果我們不使用call功能，並嘗試訪問該函數內的this關鍵字你執行，因爲你會被引用GetAnchorTextFromCurrentElement的鼠標懸停功能的上下文語境，而不是你會得到的undefined錯誤。