javascript - Jquery 父母的跨度

Question

如何将文本输出到父级<div>？<span>我究竟做错了什么？如果有比使用 span 和 更好的解决方案.parent()，请告诉我。

HTML：

<div>
<span></span> <!--the span where i want to output "troll" and "dwarf"-->
<a href="#" class="heroes" alt="troll">Icon</a>
<a href="#" class="heroes" alt="dwarf">Icon</a>
</div>

<div>
<span></span <!--the span where i want to output "witch"-->
><a href="#" class="heroes" alt="witch">Icon</a>
</div>

<div> 
<span></span> <!--etc...-->
<a href="#" class="heroes" alt="barbarian">Icon</a>
</div>

<div>
<span></span>
<a href="#" class="heroes" alt="necromancer">Icon</a>
</div>

JS：

$('.heroes').hover(function() {
    var hero = $(this).attr('alt');
    $(this).parent('span').text(hero);
}, function() {
    $(this).parent('span').text("");
});

谢谢

Answer 1

$(this).siblings('span').text(hero);

跨度是锚的兄弟，而不是父。

缩进你的 HTML，你很容易看到它：

<div> <!--The parent of the span and anchors!-->
    <span></span> <!--Sibling of the anchors!-->
    <a href="#" class="heroes" alt="troll">Icon</a>
    <a href="#" class="heroes" alt="dwarf">Icon</a>
</div>

现场演示

注意： alt不是锚的有效 HTML 属性。

Answer 2

利用：

$(this).closest('div').find('span').text(hero);

<span>是兄弟不是您的链接的父级，您可以根据实际<div>父级找到它。