Question

So I got the following scenario:

$('.menu').find('a').each( function(el, val) {
  if( window.location.hash !== val.hash ) {
    $('.menu li').first().addClass('active') // we found no valid hash for us, so set first <li> active
    $('#hash1').show() // and show the first content
  } else {
    $(this).parent().addClass('active') // we found an hash, so give its parent <li> an active class
    $(window.location.hash).show() // can be #hash2, #hash3, whatever
    return false; // since we found something, stop the if.
  }
});

Well now obviously, each time we found no valid hash, we set the first element active and show the first content… but I dont want that.

I want the if to loop through all elements first before we go into the else statement.. and THEN if we found nothing, set the first element active and show the first content.

since I am looping through each “a”, how do I do that?

Answer 1

You can use .filter() to get the elements you want. If none are selected, you perform the default action:

var $links = $('.menu').find('a').filter(function() {
    return window.location.hash === this.hash;
});

if($links.length > 0) {
    $links.parent().addClass('active');
    $(window.location.hash).show();
}
else {
    $('.menu li').first().addClass('active');
    $('#hash1').show();
}

Reference: .filter