jquery如何读取哪个li元素被点击

Question

您好，我正在尝试使用 jquery 和 ul li 菜单制作自定义组合框。因此，当鼠标单击 li 元素时，我必须读取其值并将其父级设置为单击的元素值等。基本选择方法。

那么我如何读取单击的 li 元素值并将该值设置为其父元素。这是我的结构。

  <ul class="topnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">All Abilities</a>
                <ul class="subnav">
                    <li><a href="#">Fire Master</a></li>
                    <li><a href="#">Great Attack</a></li>
                    <li><a href="#">Manyak Ability</a></li>
                    <li><a href="#">Super Ability</a></li>
                    <li><a href="#">Deneme Ability</a></li>
                </ul>
            </li>
        </ul>

这里是jquery代码

        $(document).ready(function () {

        $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

        $("ul.topnav li").click(function () { //When trigger is clicked...

            //Following events are applied to the subnav itself (moving subnav up and down)
            $(this).find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

            $(this).hover(function () {
            }, function () {
                $(this).find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
            });

            //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function () {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function () {    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
        });


        $("ul.topnav li ul.subnav li a").click(function () { //When trigger is clicked...

            //****************** none of these working*************************//
            var srVal1 = $(this).find("ul.subnav").val();
            var srVal2 = $(this).find("subnav").val();
            var srVal3 = $(this).find("li a").val();
            var srVal4 = $(this).find("a").val();
            var srVal5 = $(this).parent("li").val();
            var srVal5 = $(this).find("li").val();
            var srVal6 = $(this).val();
            var srVal7 = $(this).parent("li a").val();

        });
    });

Answer 1

您想要$(this).text() , .val()用于表单元素。

这是给你的一个jsfiddle:http://jsfiddle.net/JbRqM/1/

注意我使用了.parents('li')选择父级 <li>嵌套 ul 的标签:

$(this).parents('li').html($(this).text());