使用Javascript過濾數據

我在我的html頁面上有一個元素列表（DIV），如下所示。使用Javascript過濾數據

在同一頁上有一個標籤列表。

我需要當用戶點擊標籤（例如#bacteria）時，只顯示那些包含該標籤的DIV。

什麼是最輕量級和簡單的方法來實現呢？

<div class='entry'> 
    <p>#antibiotics destroy #e-coli and that&#39;s not good!!!!</p> 
    <!-- Hashtags: #antibiotics #eColi --> 
    <!-- UID: 755a2a60-972e-11e3-a464-872f2fc4dea2 --> 
</div> 

<div class='entry'> 
    <p>#bacteria can be #friendly, such as #e-coli for example</p> 
    <!-- Hashtags: #bacteria #friendly #eColi --> 
    <!-- UID: 6cc66d00-972e-11e3-a464-872f2fc4dea2 --> 
</div> 

<div class='entry'> 
    <p>#antibiotics can fight #bacteria</p> 
    <!-- Hashtags: #antibiotics #bacteria --> 
    <!-- UID: b37992c0-9686-11e3-8b2c-c97ae6645b3b --> 
</div>

我知道Angular對於這類東西是強大的，但我想使用輕量級和容易的東西。就像也許有可能使用jQuery或其他...

僅供參考運行在Node.Js/Express.Js與EJS渲染的整個事情。

謝謝！

UPDATE

假設現在我有幾個主題標籤，我需要檢查。就好像contains變量不是一個字符串，而是一個數組，我只需要顯示包含該數組的所有值的條目。我將如何更改代碼？試圖做到這一點，但無法管理......非常感謝！

來源

2014-02-16 Dmitry Paranyushkin

可以爲您的主題標籤添加到屬性？像'data-hash =「細菌友好型」'？它會使這樣做更容易 –

您需要像'$（'*：contains（「＃antibiotics」）'）;'在每個'.entry'類中查找hashtag。對於匹配的你，然後選擇並執行你的動作。這可能會大大影響你的表現。特別是如果您的網頁包含數以千計的這些 – 2014-02-16 20:10:24

使用:contains jquery selector

$(document).ready(function(){ 
    $('.entry').hide(); 
    $('.links').on('click','a',function(e){ 
     var $ctx = $(e.target); 
     var contains = $ctx.text(); 
     $('.entry').hide(); 
     $('.entry:contains('+contains+')').show(); 
     return false; 
    });  
});

樣品：http://jsfiddle.net/LA3tD/

編輯

可以使用用逗號，然後拆分，或使用與數據分離的一些屬性的文字，後來把它分解爲級聯濾波器選擇

$(document).ready(function(){ 
    $('.entry').hide(); 
    $('.links').on('click','a',function(e){ 
     var $ctx = $(e.target); 
     var contains = $ctx.text(); 
     $('.entry').hide(); 
     if(contains.indexOf(',')!=-1){ 
      var tags = contains.split(','); 
      var filt = ''; 
      $.each(tags,function(i,el){ 
       filt += ':contains('+el+')'; 
      }); 
      // :contains can be concatenated multiple times f.e.: ":contains(foo):contains(bar)" 
      $('.entry'+filt).show(); 
     }else{ 
      $('.entry:contains('+contains+')').show(); 
     }; 
     return false; 
    });  
});

更新的樣本：http://jsfiddle.net/LA3tD/1/

來源

2014-02-16 20:14:37 markcial

謝謝，這工作！ –

btw什麼是返回false;這裏的？ –

只是我的一種編碼習慣，如果你想防止事件冒泡只是返回false，但這是另一個話題無關，你可以跳過 – markcial

未經測試：

$('.entry').each(function(item) { $(item).show($item.is('.' + hashtag)); });

你將不得不主題標籤添加爲一類，當然：

<div class="entry antibiotics">

來源

2014-02-16 20:07:57 Malvolio

只要標籤名稱是 –

@DA，就可以工作。謝謝。請參閱編輯。 – Malvolio

理想情況下，你會採納您的＃標籤的數據到div的自己。與數據 - ..perhaps *屬性：

<div class='entry' data-hashtags='antibiotics bacteria'>

通過jQuery

然後你可以遍歷這些隱藏的那些不匹配：

var clickedHashtag = x //get the clicked on hashtag however you like 

$('.entry').each(function(){ 
    if($(this).data('hashtags').indexOf(clickedHashtag)>=0){ 
     $(this).hide() 
    } 
})

小提琴：http://jsfiddle.net/Jz3gZ/

來源

2014-02-16 20:10:06

看起來像一個不錯的解決方案，但沒有爲我工作...你確定所有的DIV elemenets都被引用了嗎？而且我根據你的建議將名稱移動到標籤中，但沒有運氣。 –

@deemeetree啊，我的錯。您需要將數據屬性視爲一個字符串，並在其中查找匹配項目的索引。我已經更新了我的答案，幷包含一個可用的jsfiddle。 –

謝謝！我可以在.entry div元素上使用.indexOf嗎？我嘗試過，但無法設法使其工作......謝謝！ –

使用Javascript過濾數據

回答

相關問題