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)
});

将鼠标设置在Son 2上：示例父亲1＆gt;儿子2

Answer 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函数接受数组中的每个项目，并使用您在传递map函数的函数中指定的返回值创建一个长度相同的新数组。从技术上讲，你需要调用get函数才能访问数组，因为map的这个特定版本会返回一个JQuery对象，但我离题了。

获得数组后，只需将数组中的每个项目加入所需的字符串，即可获得最终结果显示在div中。

由于我们在this函数中使用GetAnchorTextFromCurrentElement关键字，我们必须使用call方法执行该函数。如果我们没有使用call函数并尝试访问您执行的函数内的this关键字，则会出现undefined错误，因为您将引用GetAnchorTextFromCurrentElement {1}}的上下文而不是鼠标悬停功能的上下文。

我希望当我将鼠标移过Li时，结果显示在div中

2 个答案: