How to filter out divs containing numbers up to another number?

问题: I've been working on a project where I can use a search term to filter out some div boxes. For example each div contains a number like 100, 200 or 300. When I 250 into the...

问题:

I've been working on a project where I can use a search term to filter out some div boxes. For example each div contains a number like 100, 200 or 300. When I 250 into the search input, I need it to hide the divs that contain 100 and 200, as they are less than 250. Does this make sense?

This is what I have done so far:

<input type="text" id="search_value" onkeyup="search_filter()">

<div id="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div id="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div id="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>      



function search_filter() {

  //Get Value of input & convert to Int 
            var s_value = document.getElementById("search_value").value;
            s_value = parseInt(s_value);

            //Get Value of in div and convert to Int
            var d_value = document.getElementById("div_value").innerHTML;
            d_value = parseInt(d_value);

            //Hide Divs

            if(s_value > d_value){
              $(function(){
                $(".container").hide();
                document.getElementsByTagName(".container")[0].setAttribute("class", "hide_container");
              });
            }
            else {
              $(function(){
                document.getElementsByTagName(".container")[0].setAttribute("class", "show_container");
              });
            };
       }

I feel like I need to make each div unique but I'm not sure on how to go about creating a long list of div containers with numbers on a table that will hide.

Thanks


回答1:

You can loop through all the td with class div_value to compare the the text with the value of input element so that you can hide/show based on the condition.

Try with jQuery's .each() the following way:

function search_filter(input) {

  $('table tr td.div_value').each(function(){
    if(Number($(this).text()) >= Number(input.value))
      $(this).closest('.container').css({display: 'block'});
    else
      $(this).closest('.container').css({display: 'none'});
    
  });

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter(this)">

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>

Please Note: I will suggest you to ignore inline event listeners.

$('#search_value').on('keyup', function(){
  var input = this;
  $('table tr td.div_value').each(function(){
    if(Number($(this).text()) >= Number(input.value))
      $(this).closest('.container').css({display: 'block'});
    else
      $(this).closest('.container').css({display: 'none'});
    
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value">

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>


回答2:

First, most of your selectors are incorrect.

Do not use multiple ids with the same value (container). Change to a class if you need the same name.

Also if you can use jQuery then use it everywhere, or dont use it at all.

function search_filter() {

  //Get Value of input & convert to Int 
  var s_value = parseInt($("#search_value").val());

  $('.container').each((i, element) => {
    if (s_value > parseInt($(element).find('.div_value').text())) {
      $(element).hide();
      $(element).addClass('hide_container')
    } else {
      $(element).show();
      $(element).addClass('show_container')
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_value" onkeyup="search_filter()">

<div class="container">
  <table class="information">
    <tr>
      <td class="key">Info</td>
      <td class="div_value">300</td>
    </tr>
  </table>
</div>

<div class="container">
  <table class="information">
    <tr>
      <td class="key">Info</td>
      <td class="div_value">250</td>
    </tr>
  </table>
</div>
<div class="container">
  <table class="information">
    <tr>
      <td class="key">Info</td>
      <td class="div_value">200</td>
    </tr>
  </table>
</div>


回答3:

Using vanilla Javascript, I would solve it this way.

On every input event on the <input />, walk through the list of .div_value, and set their closest('container')'s display property accordingly.

const valueDivs = [...document.querySelectorAll('.div_value')]
search_value.addEventListener('input', () => {
  for (const valueDiv of valueDivs) {
    valueDiv.closest('.container').style.display = 
      Number(valueDiv.textContent) >= Number(search_value.value) 
        ? 'block' 
        : 'none'
  }
})
<label> Filter by number: <input type="number" min="0" id="search_value" /></label>
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">150</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>      
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>


回答4:

Here's an example of using a forEach loop to show/hide the divs when you run your function. This uses vanilla javascript.

<input type="text" id="search_value" onkeyup="search_filter()">

<div class="container">       
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">300</td>
        </tr>
    </table>
</div>  

<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">250</td>
        </tr>
    </table>
</div>  
<div class="container">        
    <table class="information">
        <tr>
            <td class="key">Info</td>
            <td class="div_value">200</td>
        </tr>
    </table>
</div>  



function search_filter() {

//Get Value of input & convert to Int 
var s_value = document.getElementById("search_value").value;
s_value = parseInt(s_value);

//Get Value of in div and convert to Int
var d_value_containers = document.querySelectorAll(".container");

// Loop through divs and hide divs that have a lower value than the search term
d_value_containers.forEach(function(container){
var d_value = container.querySelector(".div_value");  
var d_value_interger = parseInt(d_value.innerHTML);
  if(s_value > d_value_interger) {
    container.style.display = 'none';
  } else {
    container.style.display = 'block';
  }
});  
}
  • 发表于 2018-12-25 15:45
  • 阅读 ( 221 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除