zeigen Liste nach dem Buchstaben in Jade Daten geklickt abrufen von mongodb

Question

ich meine Daten Mops-Datei als data.brand_name i Alle Marken

Jetzt wollen zeigen, geschickt, um die Marken zu zeigen, nach Alphabete.

ich will, wenn ich auf einen Buchstaben klicken 'a' dann nur eine Liste zeigen die Buchstaben beginnen hat 'a'

Ich habe nicht, wie dies zu tun, bitte hilf mir.

EDIT 1

für aplhabet mein Mops-Datei ist wie diese

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 

ich diesen Code bin mit Marken

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

i Marken wie

brand - a 
brand - b 
brand - c 

erhalten anzuzeigen

Answer 1

Sie können jQuery erreichen, um Ihr Ziel zu erreichen. Aber zuerst müssen Sie eine zusätzliche class für Eltern div von Markennamen hinzufügen (in diesem Fall habe ich .brands) und fügen Sie ein attribute für h4 Element Markennamen zu speichern.

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

umfassen Dann jQuery auf Ihre Seite und die Nutzung nach Laden der Seite folgende Skript.

$(".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(); 
     } 
    }); 

}) 

Hier arbeitet Schnipsel: https://codepen.io/anon/pen/ZavPNo