Show/hide Dynamic Content With Data Attributes

I am struggling with achieving a My html code is:

• Cate

Solution 1:

Q1) How can I display Country Name instead?

I've replaced all the countrycode references to countryname.

Q2) Is there a way how to filter/display the content by Country Code?

You were hiding siblings. I've made a $().not() selector to hide the ones that don't match with the clicked.

Q3) Is it possible to alphabetically order all list items by the second word without using any of data attributes?

Let's do a small sort function then:

var $list = $(".countries");

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

We select only the 2 word with .text().split(' ')[1] and we do a $.sort().

Full snippet:

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('<span data-countrycode="' + key + '">' + key + ' (' + countries[key] + ')</span>');
}

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);
});

#menuspan {
  display: inline-block;
  margin-right: 20px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><divid="menu"></div><ulclass="countries"><lidata-country="country-2"data-countryname="UK">Category UK</li><lidata-country="country-2"data-countryname="UK">Category UK</li><lidata-country="country-2"data-countryname="UK">Category UK</li><lidata-country="country-3"data-countryname="Germany">Category Germany</li><lidata-country="country-1"data-countryname="France">Category Alpha</li><lidata-country="country-1"data-countryname="France">Category Beta</li><lidata-country="country-1"data-countryname="France">Category C</li><lidata-country="country-1"data-countryname="France">Category D</li><lidata-country="country-1"data-countryname="France">Category E</li></ul>

Regarding your question 3, you need probably to manipulate the list and make a sort function on it. But I'm not sure of what you desire.

Solution 2:

You can do

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('<span data-countrycode="' + key + '">' + countries[key].name + ' (' + countries[key].count + ')</span>');
}

$('#menu span').click(function() {
  var clicked = $(this).data('countrycode');
  var $els = $('li[data-country=' + clicked + ']').show(1000);
  $('.countries > li').not($els).hide(1000);
});

#menuspan {
  display: inline-block;
  margin-right: 20px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="menu"></div><ulclass="countries"><lidata-country="country-1"data-countryname="France">Category France</li><lidata-country="country-1"data-countryname="France">Category France</li><lidata-country="country-1"data-countryname="France">Category France</li><lidata-country="country-1"data-countryname="France">Category France</li><lidata-country="country-1"data-countryname="France">Category France</li><lidata-country="country-2"data-countryname="UK">Category UK</li><lidata-country="country-2"data-countryname="UK">Category UK</li><lidata-country="country-2"data-countryname="UK">Category UK</li><lidata-country="country-3"data-countryname="Germany">Category Germany</li></ul>