Показать / скрыть динамический контент с атрибутами данных

Я борюсь с достижением

Мой html-код:

 
  • Category France
  • Category France
  • Category France
  • Category France
  • Category France
  • Category UK
  • Category UK
  • Category UK
  • Category Germany

Мой код JS:

  var countries = {}, country; $('.countries li[data-country]').each(function (i, el) { country = $(el).data('country'); countryname = $(el).data('countryname'); if (countries.hasOwnProperty(country)) { countries[country] += 1; } else { countries[country] = 1; } }); for (var key in countries) { $('#menu').append('' + key + ' (' + countries[key] + ')'); } $('#menu span').click(function () { var clicked = $(this).data('countrycode'); $('li[data-country=' + clicked + ']').show(1000).siblings().hide(1000); }); 

JS-код выше создает меню с кодом страны – Q1). Как я могу отобразить название страны?

Также функция toggle-hide / show работает неправильно – Q2) Есть ли способ фильтрации / отображения содержимого по коду страны

И последний вопрос – Q3) Можно ли в алфавитном порядке упорядочить все элементы списка вторым словом без использования каких-либо атрибутов данных?

См. Мой JSfiddle здесь: http://jsfiddle.net/oja417nq/2/

Большое спасибо…

Q1) Как я могу отобразить название страны?

Я заменил все ссылки на countrycode на countryname .

Q2) Есть ли способ фильтровать / отображать содержимое по коду страны?

Вы прятали братьев и сестер. Я сделал селектор $().not() , чтобы скрыть те, которые не совпадают с щелчком.

Q3) Можно ли в алфавитном порядке упорядочить все элементы списка вторым словом без использования каких-либо атрибутов данных?

Давайте сделаем небольшую функцию сортировки:

 var $list = $(".countries"); $list.children().detach().sort(function(a, b) { return $(a).text().split(' ')[1].localeCompare($(b).text().split(' ')[1]); }).appendTo($list); 

Мы выбираем только 2 слова с .text().split(' ')[1] и делаем $.sort() .

Полный fragment:

 var countries = {}, country; $('.countries li[data-country]').each(function(i, el) { country = $(el).data('country'); countryname = $(el).data('countryname'); if (countries.hasOwnProperty(countryname)) { countries[countryname] += 1; } else { countries[countryname] = 1; } }); for (var key in countries) { $('#menu').append('' + key + ' (' + countries[key] + ')'); } var $list = $(".countries"); $list.children().detach().sort(function(a, b) { return $(a).text().split(' ')[1].localeCompare($(b).text().split(' ')[1]); }).appendTo($list); $('#menu span').click(function() { var clicked = $(this).data('countrycode'); $('li[data-countryname=' + clicked + ']').show(1000); $('li').not('[data-countryname=' + clicked + ']').hide(200); }); 
 #menu span { display: inline-block; margin-right: 20px; } 
   
  • Category UK
  • Category UK
  • Category UK
  • Category Germany
  • Category Alpha
  • Category Beta
  • Category C
  • Category D
  • Category E

Ты можешь сделать

 var countries = {}; $('.countries li[data-country]').each(function(i, el) { var country = $(el).data('country'); if (!countries[country]) { countries[country] = { count: 0, name: $(el).data('countryname') }; } countries[country].count++; }); for (var key in countries) { $('#menu').append('' + countries[key].name + ' (' + countries[key].count + ')'); } $('#menu span').click(function() { var clicked = $(this).data('countrycode'); var $els = $('li[data-country=' + clicked + ']').show(1000); $('.countries > li').not($els).hide(1000); }); 
 #menu span { display: inline-block; margin-right: 20px; } 
   
  • Category France
  • Category France
  • Category France
  • Category France
  • Category France
  • Category UK
  • Category UK
  • Category UK
  • Category Germany