zoukankan      html  css  js  c++  java
  • jquery页面搜索关键词突出显示

    页面搜索关键词突出

            // 页面搜索关键词突出
            $(function () {
                $(".list_r").find('span').css({ // 每次搜索开始,先把所有字体颜色恢复初始状态
                    'color': "#838792"
                });
    
                var tableTrTdContent = $(".list_r").find('p:contains("' + $('#txtSearch').val() + '")'); // 获取所有含有搜索内容的p,类似于集合存储       
    
                if ($('#txtSearch').val() != '') { // 如果搜索内容为空,就不用去更改样式
    
                    if (tableTrTdContent.length > 0) { // 集合长度不为0,则表示搜索的内容存在
    
                        for (var a = 0; a < tableTrTdContent.length; a++) { // 遍历找到的p集合,进行每个渲染颜色
                            var contents = tableTrTdContent.eq(a).text(); // 获取到含有搜索内容的p里的集体内容,即字符串
                            var contentsArr = contents.split($('#txtSearch').val()); // 以搜索框中的内容将p的值进行分割成数组
                            var contentArrFirst = contentsArr[0]; // 将数组里的第一个值取出
                            for (var j = 1; j < contentsArr.length; j++) { // 将分割出来的内容进行染色后重新组合在一起
                                contentArrFirst += "<span style='color:#e33244;font-weight:bolder'>" + $('#txtSearch').val() + "</span>" + contentsArr[j];
                            };
                            tableTrTdContent.eq(a).html(contentArrFirst); // 将td里的值从新解析成html
                            console.log(tableTrTdContent.length - 1)
                        }
                    }
                }
            });

    效果图:

          

  • 相关阅读:
    mouseover 有一个多次触发的问题
    2019牛客多校第一场 H.XOR
    luoguP4570 [BJWC2011]元素(线性基)
    线性基
    2019牛客多校第七场 E.Find the median
    2019牛客多校第七场
    2019牛客多校第五场
    支配树
    2019牛客多校第四场
    Codeforces 1195E OpenStreetMap(单调队列)
  • 原文地址:https://www.cnblogs.com/lizongyan/p/15401571.html
Copyright © 2011-2022 走看看