Is there an easier way to write this? selectors

Hi Guys,

I'm just now learning javascript, and am trying to optimize my code a bit. Is there an easier way to write the following selectors?

Thanks

 $('.main-nav li > ul li:nth-child(n+1):nth-child(-n+2) a, .main-nav li > ul li:nth-child(n+3):nth-child(-n+4) a,  .main-nav li > ul li:nth-child(n+5):nth-child(-n+6) a,  .main-nav li > ul li:nth-child(n+7):nth-child(-n+8) a,  .main-nav li > ul li:nth-child(n+9):nth-child(-n+10) a,  .main-nav li > ul li:nth-child(n+11):nth-child(-n+12) a,  .main-nav li > ul li:nth-child(n+13):nth-child(-n+14) a,  .main-nav li > ul li:nth-child(n+15):nth-child(-n+16) a,  .main-nav li > ul li:nth-child(n+17):nth-child(-n+18) a,  .main-nav li > ul li:nth-child(n+19):nth-child(-n+20) a,  .main-nav li > ul li:nth-child(n+21):nth-child(-n+22) a,  .main-nav li > ul li:nth-child(n+23):nth-child(-n+24) a,  .main-nav li > ul li:nth-child(n+25):nth-child(-n+26) a,  .main-nav li > ul li:nth-child(n+27):nth-child(-n+28) a,  .main-nav li > ul li:nth-child(n+29):nth-child(-n+30) a,  .main-nav li > ul li:nth-child(n+31):nth-child(-n+32) a,  .main-nav li > ul li:nth-child(n+33):nth-child(-n+34) a,  .main-nav li > ul li:nth-child(n+35):nth-child(-n+36) a,  .main-nav li > ul li:nth-child(n+37):nth-child(-n+38) a,  .main-nav li > ul li:nth-child(n+39):nth-child(-n+40) a,  .main-nav li > ul li:nth-child(n+41):nth-child(-n+42) a,  .main-nav li > ul li:nth-child(n+43):nth-child(-n+44) a,  .main-nav li > ul li:nth-child(n+45):nth-child(-n+46) a,  .main-nav li > ul li:nth-child(n+47):nth-child(-n+48) a,  .main-nav li > ul li:nth-child(n+49):nth-child(-n+50) a').matchHeight(true);

Code (markup):

 

What, exctly, are you trying to do here? That seems like extremely clunky code.

 

I'm working with a CMS that I can't edit in any way other than JS and CSS. I have a CSS drop down navigation, which has a row of two links, which are floated left, and i have :nth(odd) cleared to drop down. Some of the navigation links scroll over onto a second line (long titles) so they end up being not even on the hover.


<ul class="main-nav">
<li>Link 1</li>
<li>Link 2
<ul>
<li>Sub Link</li>
<li>Sub Link</li>
<li>Sub Link Really Long Title Scrolls Onto Second Line</li>
<li>Sub Link</li>
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
<li>Link 3 etc</li>
</ul>

So what the selector does is select the range of the LIs, from 1 to 2, 3 to 4, 5 to 6, and so on. .matchHeight checks the height of both of the LIs and applies the height of the largest one to both.

 

any ideas?

 

If the default code looks like that, then there is a probably a reason for it. Might not be a good one, but why do you care? "optimizing" doesn't simply mean re-writing code to make it shorter. What exactly is your goal?

 

nth-child is definitely what you want, but I'm not sure why you've got it so complicated.

For example, couldn't you just do something like this:

alert( $( ".main-nav li ul li:nth-child(3)" ).html() );

RESULT: "Sub Link Really Long Title Scrolls Onto Second Line"

Does that help?

 

Well, that's the code I wrote, and I'm just really starting out in jquery so I didn't know if there was a better way to write it. There won't always be 50 sub links, so no need to have it check that far? And if there are ever more (probably won't ever be, but still) I wanted to make sure it'd compensate for it.

I'm not sure how that would help. It gives me the height of the 3rd sub link, but it wouldn't set the height equal to each other.

Here's a jsfiddle that could make it easier to understand.
http://jsfiddle.net/wEFZ2/

If you hover over one of the Main Links, the dropdown comes down, and you see 8 different links in two columns. Because some lines are longer, the text ends up wrapping onto a second line. This causes the columns to not be even which makes it look ugly, especially in the design I'm coding. So, in this scenario, I need sub link 1 to match sub link 2, sub link 3 to match sub link 4, sub link 5 to match sub link 6, sub link 7 to match sub link 8 (their heights need to match). The javascript I wrote does this, but I just don't know if there is a more efficient way to write it.

Thanks,
Nick

 

Hey Nick,

Thanks for the further explanation - that's helpful. You could try something like this:

$( ".navigation li ul" ).each(function() { // Cycle through each submenu

var counter = 1; // Set counter
$(this).find("li").each(function(){ // Cycle through each li in the submenu

if(counter %2===0){ // Even numbers only - we only want to correct the heights once for each row

var adjacent = counter - 1; // Since we're looking at the even elements 2,4,6,8 etc., the adjacent element on the same row is this element -1, i.e. 1,3,5,7
var h1 = $( ".navigation li ul li:nth-child(counter)" ).height(); // Get heights of elements in row
var h2 = $( ".navigation li ul li:nth-child(adjacent)" ).height();
var new_height = Math.max(h1, h2); // Find the maximum of the two element heights
$( ".navigation li ul li:nth-child(counter)" ).height(new_height); // Set the heights to the maximum
$( ".navigation li ul li:nth-child(adjacent)" ).height(new_height);​

} ​

counter++;
});​

});

It's not perfect, but there's a basis there for a working idea.

Hope this helps. Interesting problem!

Cheers
Mike