CODEWITHSUNDEEP
javascriptjqueryloopsif-statement
Martin Broder
Martin Broder

Reputation: 221

loop through if, return if false, if true => stop if

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?

Upvotes: 1

Views: 1990

Answers (4)

adeneo
adeneo

Reputation: 318182

var elm = $(window.location.hash).length ? window.location.hash : '#hash1';
$(elm).show();
$('a[href$="'+elm+'"]').parent().addClass('active');

Assuming the markup is the same for #hash1 as the rest, and that there is only one hash in the browser adress bar (or none) ?

Upvotes: 0

Ry-
Ry-

Reputation: 224877

Just keep a variable outside of the loop:

var found = false;

$('.menu').find('a').each( function(el, val) {
    if( window.location.hash === val.hash ) {
        $(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

        found = true;
    }
});


if(!found) {
    $('.menu li').first().addClass('active'); // we found no valid hash for us, so set first <li> active
    $('#hash1').show(); // and show the first content
}

Also, semicolons at the end of statements are not optional.

Upvotes: 3

nnnnnn
nnnnnn

Reputation: 150020

If you could explain your requirement more clearly in English I think you'll find the JavaScript structure would follow naturally.

The following is my best guess at what you are trying to do: All anchors in ".menu" that have the same .hash as window.location.hash should have their parent li made "active" and the corresponding element shown. If none matched then the first menu item should be made "active" and "#hash1" shown.

var matched = false;
$('.menu').find('a').each( function(el, val) {
  if( window.location.hash === val.hash ) {
    matched = true;
    $(this).parent().addClass('active');
    $(window.location.hash).show();
  }
});
if (!matched) {
    $('.menu li').first().addClass('active');
    $('#hash1').show();
}

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816334

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

Upvotes: 1

Related Questions