Question

我有<div>个<li>元素组，我想过滤这些元素。假设有1到10个<li>个元素。如果我在搜索框中输入5，则<div>应仅显示5.当我删除数字5时，它应显示所有<li>元素。

<input type="text">
  <div>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li‌>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </div>

Answer 1

我不知道你在做什么，因为你的解释并没有提供太多的信息，但如果你使用一个表而不是一个列表和dataTables jquery pluging有一个实时搜索可能会更好表格内容

Answer 2

创建li时，使用 testLi_1，testLi_2 ..... 之类的no创建id。并创建具有相同类 testLi 的元素。

默认情况下显示所有li

$('.testLi').show();

当用户输入值时，创建一个for循环并迭代元素并以下面的方式显示

var userInput = $("inputId").value(); //User Enter value 
for(var i=1; i<= userInput ; i++){
   $('#testLi_'+i).show();
}

Answer 3

    $(document).ready(function() {
      $('.text').keyup(function(){
       if( $(this).val()!= ''){  
            var valThis = $(this).val().toLowerCase();
            $('.number li').each(function(){               
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) !== -1) ? $(this).contents().get(0).nodeValue : $(this).hide(); 
         });       
         }else{
            $('.number li').show();       
         }   

     }); 
    });
    /*-------------- Html ----------------- */
   <div class="number">
    <ul>
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li>  
        <li>5</li>     
        <li>6</li> 
        <li>7</li> 
        <li>8</li> 
        <li>9</li> 
        <li>10</li>  
    </ul>
</div>
<input name="" class="text" type="text" />

Answer 4

$('input').keyup( function(){
    if($(this).val() == ''){
        $('li').css('display', 'visible')
    } else {
        $('li').css('display', 'none')
        $('li:eq('+($(this).val()-1)+')').css('display', 'visible')
    }
});

<!-- html -->
<input type="text">
    <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </div>

Answer 5

试试这样： -

<input type="text" id='text1' onblur="myFunction()">
<div>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
 </ul>
</div>

<script>
function myFunction() {
var txt =$("#text1").val();
$("ul li").each(function(){
if(txt.length>0){   
 if($(this).html() == txt){
  $(this).show();
 }else{
  $(this).hide();
 }
}else{
$(this).show();
}
});
}
</script>

在div中搜索与li元素组

5 个答案: