Форум

pifon · #1 (**permalink**) 05.02.2015, 09:46

Привет всем!

Запарился выдумывать, как реализовать следующую проблему (в 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 можно сказать, не знаю...

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

danik.js · #2 (**permalink**) 05.02.2015, 09:50

.each() в помощь.

ksa · #3 (**permalink**) 05.02.2015, 10:02

Сообщение от pifon

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

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

Так хоть тестовый пример сделал!

Как вариант...

<!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>

pifon · #4 (**permalink**) 05.02.2015, 10:06

Во) это то,что мне нужно) Пока читал про each(), разбирался, получил неожиданно готовое решение. Спасибо Всем огромное!

Форум

Справочник

Discord чат

Курсы javascript