根据首字母检索内容

下面是根据首字母检索内容并让其显示的代码,话不多说,上干货

以下是我自己写的用来测试的html代码

<div class="nu_b">
   
        
       
            
            <div class="mencenter">
                <div class="menk">A</div>
                <div class="menk">B</div>
                <div class="menk">C</div>
                <div class="menk">D</div>
                <div class="menk">E</div>
                <div class="menk">F</div>
                <div class="menk">G</div>
                <div class="menk">H</div>
                <div class="menk">I</div>
                <div class="menk">J</div>
                <div class="menk">K</div>
                <div class="menk">L</div>
                <div class="menk">M</div>
                <div class="menk">N</div>
                <div class="menk">O</div>
                <div class="menk">P</div>
                <div class="menk">Q</div>
                <div class="menk">R</div>
                <div class="menk">S</div>
                <div class="menk">T</div>
                <div class="menk">U</div>
                <div class="menk">V</div>
                <div class="menk">W</div>
                <div class="menk">X</div>
                <div class="menk">Y</div>
                <div class="menk">Z</div>
         </div>

        <div>
            <div class="mencar">考勤</div>
            <div class="mencar">费用报销</div>
            <div class="mencar">请假申请单</div>
            <div class="mencar">a</div>
            <div class="mencar">a</div>
            <div class="mencar">a</div>
            <div class="mencar">M</div>
            <div class="mencar">M</div>
            <div class="mencar">M</div>
        </div>
    </div>
  
        
</div>

下面是js代码

var mycars=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    var mycarss=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
    $(".menk").click(function(){
        $(".mencar").css({"display":"none"});
        var san=$(this).index();
        console.log(san);
        var menu_cards=document.getElementsByClassName("mencar");
        for(var i=0 ;i<menu_cards.length;i++){
            var menu_card=menu_cards[i];
            var meet=menu_card.innerHTML;
            var py = Mtils.utils.makePy(meet[0], true);
            if (py.indexOf(mycars[san]) != -1 || meet.indexOf(mycars[san]) != -1 || meet.indexOf(mycarss[san]) != -1) {
                console.log(py);
                menu_card.style.display = "block"
            }
        }
    })

这样就可以根据首字母检索内容并让其显示啦
欢迎点赞收藏以及评论哦
关注一下就更好了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,342评论 0 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,145评论 1 32
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,807评论 0 8
  • 一道彩虹七色耀,情感圣殿极美妙。 不是风花雪月色,为情已把魂魄抛。
    老槐树阅读 243评论 0 1
  • 【篇首语】他热爱光明,热爱诗歌,却不幸罹患了渐冻症,已不能正常说话,甚至只能用右手的一根无名指费力地在键盘上敲出一...
    浮光_掠影阅读 884评论 17 22