在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 非列表怎么寫搜索模糊匹配

非列表怎么寫搜索模糊匹配

小白一個(gè) 想問下非列表怎么寫搜索模糊匹配 例如 盡量不用jquery

              <div class="am-tab-panel" id="tab-4-5">
                <div class="am-g">
                  <div class="am-u-md-3">
                    <a href="../assets/src/真實(shí)的地球.rar" style="background-image: url('../assets/images/example/0216277pre5prkdm6jmepm.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">真實(shí)的地球<br>(點(diǎn)擊圖片下載)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(點(diǎn)擊圖片下載)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(點(diǎn)擊圖片下載)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(點(diǎn)擊圖片下載)</p>
                  </div>
                </div>
              </div>

搜索p標(biāo)簽里面的字,結(jié)果只顯示對(duì)應(yīng)的那個(gè)div ,其他結(jié)果隱藏

回答
編輯回答
局外人

不知道你說的不用jQuery是什么意思?用原生的js,如果有更方便的jQuery為什么不用?具體思路就是:
1.遍歷am-u-md-3獲取里面的p元素的innerText
2.用正則匹配,看是否匹配,如果匹配,設(shè)置div的display為none
3.如果不匹配,則繼續(xù)

2017年3月1日 18:56
編輯回答
墨小白

根據(jù)題主的代碼,改了下:

function  myfunction(){
      var p , i , inputss;
      p = document.getElementsByTagName('p');
      inputss = document.getElementById('ss');
      var reg=RegExp(inputss.value,'gu');
      for(i=0 ; i<p.length; i++){
        if(p[i].innerHTML.match(reg)){
          p[i].parentNode.style.display="";
        }else{
          p[i].parentNode.style.display="none";

        }
      }
    }

原來的代碼:

let frag=document.createElement('div')
frag.innerHTML=   `              <div class="am-tab-panel" id="tab-4-5">
                <div class="am-g">
                  <div class="am-u-md-3">
                    <a href="../assets/src/真實(shí)的地球.rar" style="background-image: url('../assets/images/example/0216277pre5prkdm6jmepm.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">真實(shí)的地球<br>(點(diǎn)擊圖片下載)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(點(diǎn)擊圖片下載)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(點(diǎn)擊圖片下載)</p>
                  </div>
                  <div class="am-u-md-3">
                    <a href="#" style="background-image: url('../assets/images/example/example1.jpg');" class="example-item-bg"></a>
                    <p style="margin:0;text-align:center;font-size:16px;">JS198 <br>(點(diǎn)擊圖片下載)</p>
                  </div>
                </div>
              </div>`;

function getMatchedList (keyword) {
    let lists=frag.getElementsByClassName('am-u-md-3'),
    reg=new RegExp(keyword, 'gu');    
    return Array.from(lists).filter((list,index)=>{
        return list.getElementsByTagName('p')[0].textContent.match(reg);
    });
}

getMatchedList('真實(shí)');//[div.am-u-md-3]
getMatchedList('JS198');//[div.am-u-md-3, div.am-u-md-3, div.am-u-md-3]

2018年8月16日 16:57