私はマウスを渡すときに李以上、divに結果が表示されます

Question

私はマウスの上にマウスを渡すと、結果が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> 

私は父2にケース内doesntの仕事をしたjQueryの：私が理解から、例の父1>息子2

Answer 1

：息子2の上にマウスを設定

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

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

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

現在の要素リンクとその親リンク（該当する場合）を表示する必要があります。
は、だから私は、次のコードを思い付いた：あなたはすでにこれを解決してきたよう

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機能です。技術的には、mapのこの特定のバージョンはJQueryオブジェクトを返すので、配列にアクセスするにはget関数を呼び出す必要がありますが、私は迂回します。

アレイを作成したら、配列の各項目を目的の文字列に結合するだけで、最終結果がdivに表示されます。

GetAnchorTextFromCurrentElement関数内にthisというキーワードが使用されているため、callメソッドを使用して関数を実行する必要があります。 call関数を使用せず、実行した関数の中のキーワードにアクセスしようとすると、on mouseover関数のコンテキストの代わりにGetAnchorTextFromCurrentElementのコンテキストを参照するため、undefinedというエラーが発生します。