쇼 목록 내가 <p></p> 지금 내가 알파벳에 따라 브랜드를 보여주고 싶은 모든 브랜드를 보여 <code>data.brand_name</code>으로 퍼그 파일로 내 데이터를 전송 MongoDB를

Question

에서 검색 할 수 있습니다. 내가 다음은 편지 'a' 나는이 작업을 수행하는 방법을 가지고하지 않는

을 시작했다 목록을 표시 편지 'a' 클릭하면

내가 원하는, 저를 도와주세요.

EDIT 1

aplhabet 내 퍼그 파일은 내가 브랜드

내가 얻을

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

를 표시하려면이 코드를 사용하고이

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 

처럼

brand - a 
brand - b 
brand - c 

같은 브랜드

Answer 1

jQuery으로 목표를 달성 할 수 있습니다. 먼저 브랜드 이름의 부모 div (이 경우에는 .brands을 사용)에 class을 추가하고 브랜드 이름을 저장하려면 요소에 attribute을 추가해야합니다.

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

그런 다음 페이지로드 후 스크립트 다음 페이지 및 사용에 jQuery를을 포함한다. 여기

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

}) 

하고있다 조각 : https://codepen.io/anon/pen/ZavPNo