[pifon]

Привет всем!

Запарился выдумывать, как реализовать следующую проблему (в JS я не особо спец). Слёзно прошу помощи.

Есть вот такая разметка:

<a id="btn" href="#">Работай!</a>
<div class="items" id="catalog">
	<div class="item">
		<p>Всякий контент</p>
		<p class="price">Цена: <span>100</span></p>
	</div>
	<div class="item">
		<p>Всякий контент</p>
		<p class="price">Цена: <span>200</span></p>
	</div>
	<div class="item">
		<p>Всякий контент</p>
		<p class="price">Цена: <span>300</span></p>
	</div>
	<div class="item">
		<p>Всякий контент</p>
		<p class="price">Цена: <span>400</span></p>
	</div>
	<div class="item">
		<p>Всякий контент</p>
		<p class="price">Цена: <span>500</span></p>
	</div>
</div>

То есть банальный каталог с блоками, в которых есть контент и цены.

Сразу говорю, что реализовать уникальные классы или id у каких-либо элементов разметки не представляется возможным!

Суть проблемы:
При нажатии на кнопку id="btn" необходимо пробежаться по всем блокам каталога. И, если цена не находится в диапазоне от 150 до 350, соответствующему ей блоку class="item" сделать hide(); на jQuery.

Пытался нечто вроде этого пробовать:

$('#btn').click(function(){
   var i = $('#catalog .item .price span');
   var price = i.text();
   if (price < 350 && price > 150){
      i.parent().parent().hide();
   }
});

Скрипт вытаскивает текст первого эл-та из всех, до остальных не доходит. Если вместо .text() делать .html(), то вытаскивает все значения и преобразует их в огромную строку, что с ней дальше делать - не понятно...

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

Сразу повторюсь, JS можно сказать, не знаю...

Заранее благодарю за помощь)