CODEWITHSUNDEEP
jquery
Furkan Gözükara
Furkan Gözükara

Reputation: 23800

Jquery how to read which li element is clicked

Hello i am trying to make my custom made combobox with using jquery and ul li menus. So when mouse clicked to the li element i have to read its value and set its parent to the clicked element value etc. Basic selecting method.

So how can i read the clicked li element value and set that value to the parent of it. Here my structure.

  <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>

Here the jquery code

        $(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();

        });
    });

Upvotes: 2

Views: 1091

Answers (3)

Jasper
Jasper

Reputation: 75993

You want $(this).text(), .val() is for form elements.

Here's a jsfiddle for ya: http://jsfiddle.net/JbRqM/1/

Notice I used .parents('li') to select the parent <li> tag of the nested ul:

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

Upvotes: 2

Mike Richards
Mike Richards

Reputation: 5667

use $(this).parents("li") instead of $(this).parent("li")

.parent("li") only looks in the immediate parent to the element, which is <ul>

.parents("li") looks through all of the parent collections. More specifically, use .parents("li:first")

Upvotes: 0

Bez Hermoso
Bez Hermoso

Reputation: 1132

$('ul.topnav li ul.subnav li a').click(function(){

    $(this).parents('ul.subnav').siblings('a').html($(this).text());

});

Upvotes: 1

Related Questions