jQuery selector question

Hi,

I getting a syntax error on

$(this + " > li");

changing the this with a “that” variable doesn’t work either. Not sure what I’m doing wrong here?

Whilst I could give you a rough idea of what I think might be going on do you have a more complete example?

$(this).children('li')

Considering jQuery works like this:

$( selector, context )

your code above should be written as:

$("li:first-child", this);

Here’s another example:

var context = $('#myContainer');

// pass the context as the second argument
$('a', context).context; // => <div id="myContainer" />

Yeah sure, here’s the code:

    $j('.navSublevels').hover(function(){        

        var that = this;

        var liElements = $j(that+" > li"); 

        $j(liElements).each(function(){

            liWidth = $j(this).innerWidth();            
            widthArray.push(liWidth);

            largestWidth = Math.max.apply(Math, widthArray);

            $j(this).css('width', largestWidth + 'px');

        });        

    });

the ”$j” is for jQuery, my client uses 2 different JS Libraries.

My goal is simply a dropdown menu like we all know, but it’s for a own written system to create custom sites.

I need to set a width to the “li” elements, but since I won’t have a clue what kind of text there will be inside I can’t set a width, nor min-width or max-width, the sites that they will create exists in different languages and they will add/remove menu items at any moment of the day on daily basis.

So that’s why I need to know the largest width of a first level of an “ul” so that I can set the width.

Sorry if I wasn’t clear enough, but I tried my best to explain it

Thanks!

var $that = $j(this);
var liElements = $that.children("li"); 

var liElements = $j(" > li", this);

did the trick!

Now I’m having another problem. My code above sets the width of the li element, some of them are for example 80px width, others 150px. They all are set correctly until I hover away from the menu, when I do that the width of all li elements are set to 150px.

Not really the purpose. Anyone has an idea?

Thanks!

Can you post an example on js.fiddle?

Then we can play with it?

Okay, I’ve put it on Fiddle, but seems that there still some css missing in some other files that I didn’t find yet (wasn’t in this project from the start):

Fiddle

This is better:

Fiddle