Фильтр на jQuery
Привет всем!
Запарился выдумывать, как реализовать следующую проблему (в 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 можно сказать, не знаю... Заранее благодарю за помощь) |
.each() в помощь.
|
Цитата:
Как вариант...
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
$('#btn').click(function(){
$('#catalog .item .price span').each(function(){
var price = $(this).text();
if (price > 150 && price < 350){
$(this).parents('.item').hide();
}
});
});
});
</script>
</head>
<body>
<a id="btn" href="javascript:void(0);">Работай!</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>
</body>
</html>
|
Во) это то,что мне нужно) Пока читал про each(), разбирался, получил неожиданно готовое решение. Спасибо Всем огромное! :dance:
|
| Часовой пояс GMT +3, время: 23:24. |