Setting child width to that of first parent element when similar?

Question

I'm working on a suckerfish-style dropdown menu that has first-level items of varying sizes (No explicit width specified, i.e., width: auto;), which then have drop-downs that are text-align: center;.

For this to not look awful, the width of the drop-down children elements should be the same width as the parent li item. Alas, my jQuery-fu is apparently lacking and I just cannot seem to get it to work. Alternately, if somebody knows how to do this with just CSS I'll be even more impressed.

Menu HTML:

<nav id="access" role="navigation">
    <div class="menu-main-container">
        <ul id="menu-main" class="menu">
            <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">Portfolio</a>
                <ul class="sub-menu" style="">
                    <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="#">Travel</a></li>
                    <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">Commercial</a></li>
                </ul>
            </li>
            <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Info</a>
                <ul class="sub-menu" style="">
                    <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">About us</a></li>
                    <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#">FAQ</a></li>
                </ul>
            </li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Contact</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">Recent Work</a>
                <ul class="sub-menu" style="">
                     <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">Travel</a></li>
                     <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">Commercial</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

And here's my jQuery:

jQuery(document).ready( function() {
    jQuery('#access ul ul li a').width( function() {
        jQuery(this).parent('li.menu-item').width() 
    });
});

I think part of my problem is that I'm selecting the nearest parent li.menu-item, when I'm needing the most senior .menu-item (I.e., "ul li", not "ul li ul li"). Any idea how I'd do that?

Many thanks!

I think you're just omitting the return in there; `return jQuery(this).parent('li.menu-item').width();`. On a side note, try using `$` instead of `jQuery`. It's a lot quicker to type and, for me personally, easier to read. If this answer is correct, I will post it as an actual answer tomorrow for you to accept. — ClarkeyBoy, Jan 15 '12 at 22:58
Hi! I'm using WordPress, which uses jQuery noConflict();, so either writing the full syntax or encasing it in something like `jQuery(document).ready(function($){ });` is best. That said, while adding return as per suggested was effective in resizing the elements, it's still grabbing the nearest li.menu-item (I.e., the one the `a` element is in), not the parent. Any thoughts? — aendra, Jan 15 '12 at 23:05
Ah yeah didn't see the `a` in the first selector. Change it to `.parent('li.menu-item').parent('li.menu-item')`. I personally prefer using `.closest(selector)` but if memory serves they're pretty much the same. I am sure others can come up with far more efficient ways but the code I provided should do it. — ClarkeyBoy, Jan 15 '12 at 23:10
No dice. Neither does `.parent('li.menu-item a')` or `.parent('li.menu-item a').parent('li.menu-item a')` — aendra, Jan 15 '12 at 23:20
Try `.closest('li.menu-item').closest('li.menu-item')`, or replace everything inside the ready function with `$(".menu-main-container > ul > li").each(function() {$width = $(this).width(); $(this).find("ul > li > a").width($width);});`. — ClarkeyBoy, Jan 15 '12 at 23:23
I've added it as an answer for you to accept; it may well help others trying to do a similar sort of thing. — ClarkeyBoy, Jan 15 '12 at 23:33

score 1 · Accepted Answer · answered Jan 15 '12 at 23:33

Try something like the following:

$(document).ready(function() {
    $(".menu-main-container > ul > li").each(function() { //select all top level li tags
        $width = $(this).width(); //get the width
        $(this).find("ul > li > a").width($width); //set the width of all links within submenus
    });
});

score 0 · Answer 2 · answered Jan 15 '12 at 23:15

0

$("#access ul > li > ul > li > a").each(function() {                                          
    var elmWidth = $(this).parent('li').width();
    $(this).width(elmWidth);
});

Or if they are all the same width

$("#access ul > li > ul > li > a").width($(this).parent('li').width());

answered Jan 15 '12 at 23:15

adeneo

312,895
29
395
388

This won't work - read the comments above... this will only get the `li` just above the `a`. – ClarkeyBoy Jan 15 '12 at 23:19
Besides which in the 2nd code snippet what would `$(this)` represent..? I am pretty sure it has to be in a function for `this` to be the current object. – ClarkeyBoy Jan 15 '12 at 23:20

Setting child width to that of first parent element when similar?

2 Answers2