циклически проходите if, возвращайте if false, если true => остановите if

Question

Итак, я получил следующий сценарий:

$('.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.
  }
});

Что ж, теперь, очевидно, каждый раз, когда мы не нашли действительного хэша, мы устанавливаем первый активный элемент и показываем первый контент ... но я не хочу этого.

Я хочу, чтобы if сначала просматривал все элементы, прежде чем мы перейдем к оператору else ... и ТОГДА, если мы ничего не нашли, установите активный первый элемент и покажите первый контент.

Поскольку я перебираю каждое "а", как мне это сделать?

Answer 1

Просто держите переменную вне цикла:

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
}

Кроме того, точки с запятой в конце операторов не необязательны.

Answer 2

Вы можете использовать .filter(), чтобы получить нужные элементы. Если ни один не выбран, вы выполняете действие по умолчанию:

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();
}

Ссылка : .filter

Answer 3

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

Предполагается, что разметка для #hash1 такая же, как и для остальных, и что в адресной строке браузера есть только один хэш (или его нет)?

Answer 4

Если бы вы могли более четко объяснить ваше требование на английском, я думаю, вы обнаружите, что структура JavaScript будет следовать естественным образом.

Следующее мое лучшее предположение о том, что вы пытаетесь сделать: Все якоря в ".menu", которые имеют тот же .hash, что и window.location.hash, должны иметь своего родителя li активным и соответствующий элемент показан. Если ни один не совпадает, то первый пункт меню должен быть сделан «активным» и показываться «# hash1».

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();
}