How can i unset the changes made by jquery?

Question

I am filtering data according to first character but when user click all I want to show all the data but once I have filtered data according to character I am not able to reset it to all.

I want to allow user to filter data according to alphabet user select and when user click all user should be able to see all the items again.

My code:

$('.myFilters li').on("click", function() {
    if($(this).text() == "all"){
        $(this).show();
        return ;
    }
    var letter = $(this).text()[0];

    $('#mycatouter div').each(function() {
    letter=letter.toUpperCase();
    if ($(this).text()[0] == letter) {
      $(this).show();
    } else {
      $(this).hide();
    }
    });
});

Answer 1

The issue is in the usage of the this keyword:

$('.myFilters li').on("click", function() {
    if($(this).text() == "all"){
        $('#mycatouter div').show();
        return;
    }
    var letter = $(this).text()[0];

    $('#mycatouter div').each(function() {
      letter = letter.toUpperCase();
      if ($(this).text()[0] == letter) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
});

In your first if, this refers to the event target, while in the each loop it refers to the current element in the loop.