Активный класс не применяется к определенным пунктам меню

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

Я работаю с шаблоном блога, используя PHP для загрузки элементов страницы из базы данных. Вот встроенное меню и .active стиль, основанный на моем PHP:

<div role="navigation" id="menu">
<div class="page-menu">
<ul>
<li class="list-item"><a href="/anchor/posts" title="Posts">Posts</a></li>
<li class="list-item"><a href="/anchor/demo-page-3" title="Demo Page 3">Demo Page 3</a></li>
<li class="list-item"><a href="/anchor/demo-page-4" title="Demo Page 4">Demo Page 4</a></li>
<li class="list-item"><a href="/anchor/demo" title="demo page">demo</a></li>
</ul>
</div>

<style>
.active {background-color: #0d597e; }
</style>

Вот мой сценарий:

$(document).ready(function(){
var current = location.pathname;
$('.page-menu li a').each(function(){
var $this = $(this);
if($(this).attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})

Теперь я знаю, что это работает, потому что в «Записи» добавлен активный класс, ни одна из других страниц не делает, когда на них нажимают.

Я также проверил с alert(location.pathname) и все вернулись правильно. Куда я иду не так? Я дергаю себя за волосы, пытаясь разобраться в этом.

JSFIDDLE