Apply different images according to size for navigation menus

I want to use different background images according to size of <li> element for navigation menus.

I'm trying to style Wordpress menu, with dropdown boxes, but I have lots of link names, which goes in one line, but few lines are longer, and they are splitting in two.

For those <li> elements, which goes in one line, I applied background image using simple CSS, but I want to check, if there are some <li> elements, which height is more than height for one line. In my case, one line height is 34px; if there are two lines, height is already 54px, and default background image does not suit there (it repeats it self). But I want to apply larger image for that 54px box with jquery.

I came up with this code, which, of course, is not working:

var line_height = $("nav li").height(); 

if(line_height > 34){

    $(this).css("background-image", url("images/nav-two-lines.png"))
}

I tried to check that line_height value, and it was 34px. I bet it reads only first element, and true, its one line, and its开发者_C百科 height is 34px.

I hope, there would be anyone, who could help.

Thanks!

If the issue is that the image repeats itself, you want to modify the CSS to read:

background: url(...) no-repeat;

In answer to your question, you need to loop through all of the li's, not just test one:

$('nav li').each(function() {
    if($(this).height() > 34)
        $(this).css('background-image', 'url(images/nav-two-lines.png)');
});