Как сократить код?

Question

[Павел Антонов]

Полюбому можно каким-то циклом это все обыграть, но мне не хватает знаний.

//подсчет количества работ в категории
$(document).ready(function() {
	var landing = $(".landing").length;
	$(".filter[data-filter='.landing']").find("span").text(landing);

	var vizitka = $(".vizitka").length;
	$(".filter[data-filter='.vizitka']").find("span").text(vizitka);

	var corporate = $(".corporate").length;
	$(".filter[data-filter='.corporate']").find("span").text(corporate);

	var katalog = $(".katalog").length;
	$(".filter[data-filter='.katalog']").find("span").text(katalog);

	var magazin = $(".magazin").length;
	$(".filter[data-filter='.magazin']").find("span").text(magazin);

	var stroitelstvo = $(".stroitelstvo").length;
	$(".filter[data-filter='.stroitelstvo']").find("span").text(stroitelstvo);

	var mebel = $(".mebel").length;
	$(".filter[data-filter='.mebel']").find("span").text(mebel);

	var uslugi = $(".uslugi").length;
	$(".filter[data-filter='.uslugi']").find("span").text(uslugi);

	var turizm = $(".turizm").length;
	$(".filter[data-filter='.turizm']").find("span").text(turizm);

	var tehnika = $(".tehnika").length;
	$(".filter[data-filter='.tehnika']").find("span").text(tehnika);

	var medicina = $(".medicina").length;
	$(".filter[data-filter='.medicina']").find("span").text(medicina);

	var infores = $(".infores").length;
	$(".filter[data-filter='.infores']").find("span").text(infores);

	var uniq = $(".uniq").length;
	$(".filter[data-filter='.uniq']").find("span").text(uniq);

	var adaptive = $(".adaptive").length;
	$(".filter[data-filter='.adaptive']").find("span").text(adaptive);

	var bigproject = $(".bigproject").length;
	$(".filter[data-filter='.bigproject']").find("span").text(bigproject);
});

Код рабочий, считает количество div с нужным классом, затем находит элемент li у которого в атрибуте data-filter находится тот класс, который мы считали, затем внутри этого li ищет span и вставляет посчитаную цифру в него.

Кусочек ul>li для понимания

<ul>
					<li class="filter" data-filter=".vizitka"><span></span>сайт-визитка</li>
					<li class="filter" data-filter=".landing"><span></span>landing-page</li>
					<li class="filter" data-filter=".corporate"><span></span>корпоративный сайт</li>
					<li class="filter" data-filter=".katalog"><span></span>онлайн-каталог</li>
					<li class="filter" data-filter=".magazin"><span></span>интернет-магазин</li>
				</ul>

Answer 1

[Camaro67]

Можно сделать так, если могут быть ul>li которые не должны обрабатываться.

$( document ).ready( function() {
	var selectors = [
		'landing', 'vizitka', 'corporate', 'katalog', 'magazin',
		'stroitelstvo', 'mebel', 'uslugi', 'turizm', 'tehnika',
		'medicina', 'infores', 'uniq', 'adaptive', 'bigproject'
	];

	for( var key in selectors ) {
		$( ".filter[data-filter='." + selectors[ key ] + "']" )
		.find( "span" )
		.text( $( "." + selectors[ key ] ).length );
	}
} );

Иначе, так (предпочтительный вариант)

$( 'li.filter' ).each( function() {
	// Код обработки элемента
} );

Answer 2

[Stepanya]

Во первых создаем функцию

funсtion(className) {
  var count = $("."+className).length;
  $(".filter[data-filter='."+className+"]").find("span").text(count);
  return count;
}

Answer 3

[vvovas]

Как-то так

$('li.filter').each(function(){ //бежим по списку
var $li = $(this);
var type = $li.data('filter'); //достаем тип
$li.find('span').text($(type).length); //пишем количество
});

Comments

[Павел Антонов]

Выбрал ваш вариант :) работает как надо. И мне он ближе как-то