динамичный алфавитный список
 

Делаю список ингредиентов с алфавитными якорями и вызов якорей по нажатию на букву алфавита. Все вроде бы работает, но нужно пару функций, которые я не знаю как прикрутить.

Вот закинул в песочницу то что уже готово: Alphabet

Этот весь список выводится динамически циклом из базы.

Есть три вещи, которые я хочу исправить:

1. Так как алфавит должен быть полным (это только в песочнице я его немного урезал). А вот описание ингредиентов могут пополняться не все сразу, а постепенно. И какое то время, некоторые буквы выводят пустые якоря. Выглядит глупо - нужно сделать так что бы те якоря, под которыми нет ингредиента выводили некий текст-заглушку, например - "Empty section".

2. Несколько раздражает цепочка пустых якорей (столбик из точек). Как можно спрятать "пустые" якоря в общем списке, когда выводится все ингредиенты. Например, сейчас пустые якоря под буквами V W X Y Z а точки под ними уродливо выстроились в колонку.

3. При нажатии на название ингредиента открывается описание ингредиента, и пока оно открыто нужно как то добавить класс .active для этой ссылки (название ингредиента).

Возможно я слишком усложнил. Но по другому не получается. Вся эта "гармонь" завязана на динамически формируемый список ингредиентов и там я ничего менять не могу. Вернее, все что мог изменить - уже изменил. Этот список формируется чужим плагином для WP и там те ещё пляски с бубном.

По этому я решил тот плагин особо не трогать а попробовать воспользоваться тем что он выводит этот список и его уже обвесить скриптами.

Может кто то знает более простое решение. Буду благодарен, если подскажете. (но учитывайте плз. я в js слабо разбираюсь) :yes:

Round, могу помочь, 1000р в час...

Премного благодарен, но я хотел бы разобраться в этом, а не просто работу скинуть на кого то.

Я ожидаю в общении здесь получить идею как эти функции прикрутить к тому что уже есть.

По первому вопросу (заглушка - "Empty section") я так понимаю, что нужно как то проверять что дочерний блок не пустой, а если он пуст, то все прятать и показать лишь span - "Empty section". Только вот, как это сделать?

Второй вопрос может быть завязан с первым. Там же где определяем что блок пуст - назначать некий класс для этого блока, например .empty (display:hide)

По третьему вопросу, я пока что вообще не представляю как это сделать.

Спасибо всем за активное общение. ;)

Третий вопрос уже не актуален.
Все решил простой подменой класса

$(".ing-title").click(function(){
  $(".active-ing").removeClass("active-ing");
  $(this).addClass("active-ing");
});

По первым двум вопросам нужен совет.

Все сделал сам.

Может кому пригодится - вот решения:

1. что бы сделать заглушку для пустых букв немного изменил код подсчета букв и повесил фейд-ин для нового элемента с классом "blank", а в этот элемент положил свой текст-заглушку.

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

3. третье решение я описал выше...

Вот что в итоге получилось:

$("a").click(function(){
  $(".active-ing").removeClass("active-ing");
  $(this).addClass("active-ing");
});


var all_spans = $('.alpha-row .accordion-inner').hide();

$('.alpha-row a').click(function(e){
    var thisSpan = $(this).parent().find('.accordion-inner'),
        isShowing = thisSpan.is(":visible");

    // Hide all spans
    all_spans.hide();

    // If our span *wasn't* showing, show it
    if (!isShowing) {
        thisSpan.show();
    }

    e.preventDefault();
});


var triggers = $('.alphabet-nav a');
var filters = $('.alpha-box ing');
$(".noresult").hide();

triggers.click(function() {
	var takeLetter = $(this).text(),
		count = 0;
	filters.parent().hide();
	$(".noresult").hide();

	$.each(filters, function(i, item) {
		var compareFirstLetter = $(item).text().substr(0, 1);
		if (compareFirstLetter == takeLetter) {
			$(item).parent().fadeIn(222);
			count++;
		}
	});

	if (count === 1) {
		$(".noresult").fadeIn(22);
	}
});


$(".alpha-box .alpha-row").sort(asc_sort).appendTo('.alpha-box');
 //$("#debug").text("Output:");

function asc_sort(a, b){
        return ($(b).text()) < ($(a).text()) ? 1 : -1;    
    }


$(".ing-letter").next('.ing-list').each(function() {
  $(this).prev().css({display: 'block'});
});