show list according to the letter clicked in jade data retrieve from mongodb

问题

I sent my data to pug file as data.brand_name to show all brand

Now i want to show the brands according to alphabets.

I want when i click on a letter 'a' then it only show a list which has starting letter 'a'

I don't got how to do this,please help me.

EDIT 1

my pug file for aplhabet is like this

 div.row
                            div.drug_alphabets.pull-left
                                span.center
                                    ul
                                        li
                                            a.btn2.hoverable(href='#') A
                                        li
                                            a.btn2.hoverable(href='#') B
                                        li
                                            a.btn2.hoverable(href='#') C
                                        li
                                            a.btn2.hoverable(href='#') D

I am using this code to display brands

   for each brand in data   
      h4 brand- #{brand.brand_name} 

i get brands like

brand - a
brand - b
brand - c

回答1:

You can jQuery to achive your goal. But first of all you need to add a additional class for parent div of brand names (in this case I used .brands) and add an attribute for h4 element to store brand names.

.brands
    for each brand in data   
        h4(name=brand.brand_name) brand- #{brand.brand_name} 

Then include jQuery to your page and use following script after page load.

$(".drug_alphabets a").on("click", function() {

    var clickedLetter = $(this).text()

    $(".brands h4").each(function() {
        var brandName = $(this).attr("name")
        if (brandName && brandName.toLowerCase()[0] == clickedLetter.toLowerCase()) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

})

Here is working snippet : https://codepen.io/anon/pen/ZavPNo

来源：https://stackoverflow.com/questions/47381397/show-list-according-to-the-letter-clicked-in-jade-data-retrieve-from-mongodb