Javascript变量设置-列表项

Question

我有这个菜单，我想为每个 li 项目设置一个变量，并在单击时发出警报及其文本。这很简单，我用下面的脚本解决了这个问题。

$("ul#menudropd .animal li a").click(function() {
    var whatever = $(this).text();
    alert(whatever); });

现在，我还需要在警报中包含“父级”(即 mainlinks 类中的文本)。通常不会单击父级，仅将鼠标悬停在其上以显示子级。但是，它是文本，所以应该很容易吧？

示例: 目前，您单击“小狗”，警报显示“小狗”。我需要说“狗:小狗”。下一节也一样。单击“小猫”，我需要警报以“猫:小猫”的形式返回。

我知道如何在设置第二个变量后显示警报，但我只是不知道如何在不单击它的情况下执行此操作。有什么想法吗？

<ul id="menudropdown">
<li class="mainlinks"> <a href="#"> Dog </a> 
<div class="animal dog"> 
<li><a href= "#"> Puppy </a></li> 
<li><a href= "#"> Pup </a></li> 
</div>
</li> 
<li class="mainlinks"> <a href="#"> Cat </a> 
<div class="animal cat"> 
<li><a href= "#"> Kitty </a></li> 
<li><a href= "#"> Kitten </a></li> 
</div>
</li> 
</ul>

Answer 1

使用closest()而且您可能还需要 ul 而不是 div，您的 html 似乎无效，因为 div 直接包含 li 元素。

The HTML List item element (<li>) is used to represent a list item. It should be contained in an ordered list (), an unordered list () or a menu (), reference.

Live Demo

HTML

<ul id="menudropdown">
    <li class="mainlinks"> <a href="#"> Dog </a> 
        <ul class="animal dog">
            <li><a href="#"> Puppy </a>
            </li>
            <li><a href="#"> Pup </a>
            </li>
        </ul>
    </li>
    <li class="mainlinks"> <a href="#"> Cat </a> 
        <ul class="animal cat">
            <li><a href="#"> Kitty </a>
            </li>
            <li><a href="#"> Kitten </a>
            </li>
        </ul>
    </li>
</ul>

Javascript

$("ul#menudropdown .animal li a").click(function () {    
    alert($(this).closest('.mainlinks').find('a:first').text());
});