javascript – How do I set the text() of a parent of a parent of an element in jQuery? – Education Career Blog

I’m building a custom pulldown menu in jQuery.
Now I’d like to set the text of the element to the text of the element that is clicked. But I can’t get it to work.

This is the html:

<div class="pulldown">
    <a href="javascript:;" class="select">All cats/subs</a>
    <div class="options">
     <a href="javascript:;">Option one A</a>
     <a href="javascript:;">Option two A</a>
     <a href="javascript:;">Option three A</a>
        <a href="javascript:;">Option four A</a>

This is the jQuery code:

$(document).ready(function() {
$('div.pulldown').toggle(function() {
    $('.options', this).css('z-index','100').show('fast');
    $('.options A', this).click(function(){
        var value = $(this).text();
}, function(){
    $('.options', this).css('z-index','0').hide('fast');
}); });

What am I missing here?


It will be easier to work with if you clean up your HTML a little bit:

<dl class="menu">
    <dt class="topItem">All cats/subs</dt>
    <dd class="subItem">Option one A</dd>
    <dd class="subItem">Option two A</dd>
    <dd class="subItem">Option three A</dd>

Then your jQuery boils down to this:

$(function() {
    var $topItem = $('.topItem');
    var $subItems = $('.subItem');

    $topItem.bind('click', function() {

    $subItems.bind('click', function() {

A live demonstration can be found at

Note, this example needs to be expanded to take care of multiple menus with multiple sub-items. Also, instead of setting your CSS properties with JavaScript you should set them with your stylesheet.


You should set a global variable for the entire div and use that as a reference

$(document).ready(function() {
    /*Grab the div into a variable*/
    var Pulldown = $('div.pulldown');

    /*Set up your event handlers*/
    $('.options a', Pulldown).click(function(){
        var value = $(this).text();

    /*Toggle the pulldown*/
    Pulldown.toggle(function() {
        $('.options', Pulldown).css('z-index','100').show('fast');
     }, function(){
         $('.options', Pulldown).css('z-index','0').hide('fast');

Live Example here:

Leave a Comment