我希望当我通过鼠标在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错误。