i struggling achieving
my html code is:
<div id="menu"></div> <ul class="countries"> <li data-country="country-1" data-countryname="france">category france</li> <li data-country="country-1" data-countryname="france">category france</li> <li data-country="country-1" data-countryname="france">category france</li> <li data-country="country-1" data-countryname="france">category france</li> <li data-country="country-1" data-countryname="france">category france</li> <li data-country="country-2" data-countryname="uk">category uk</li> <li data-country="country-2" data-countryname="uk">category uk</li> <li data-country="country-2" data-countryname="uk">category uk</li> <li data-country="country-3" data-countryname="germany">category germany</li> </ul> my js code:
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; } }); (var key in countries) { $('#menu').append('<span data-countrycode="' + key + '">' + key + ' (' + countries[key] + ')</span>'); } $('#menu span').click(function () { var clicked = $(this).data('countrycode'); $('li[data-country=' + clicked + ']').show(1000).siblings().hide(1000); }); the js code above builds menu country code - q1) how can display country name instead?
also toggle - hide/show function isn't working properly- q2) there way how filter/display content country code
and last question - q3) possible alphabetically order list items second word without using of data attributes?
please see jsfiddle here: http://jsfiddle.net/oja417nq/2/
many thanks...
q1) how can display country name instead?
i've replaced countrycode references countryname.
q2) there way how filter/display content country code?
you hiding siblings. i've made $().not() selector hide ones don't match clicked.
q3) possible alphabetically order list items second word without using of data attributes?
let's 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 2 word .text().split(' ')[1] , $.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; } }); (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); });#menu span { display: inline-block; margin-right: 20px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="menu"></div> <ul class="countries"> <li data-country="country-2" data-countryname="uk">category uk</li> <li data-country="country-2" data-countryname="uk">category uk</li> <li data-country="country-2" data-countryname="uk">category uk</li> <li data-country="country-3" data-countryname="germany">category germany</li> <li data-country="country-1" data-countryname="france">category alpha</li> <li data-country="country-1" data-countryname="france">category beta</li> <li data-country="country-1" data-countryname="france">category c</li> <li data-country="country-1" data-countryname="france">category d</li> <li data-country="country-1" data-countryname="france">category e</li> </ul>regarding question 3, need manipulate list , make sort function on it. i'm not sure of desire.
Comments
Post a Comment