使用 jQuery 轻松过滤 HTML 分区答案

【问题标题】：Easy filter from HTML divisions with jQuery使用 jQuery 轻松过滤 HTML 分区
【发布时间】：2016-01-28 20:59:08
【问题描述】：

我正在尝试更改与给定输入条件匹配的项目的背景颜色 css 属性：

我的 HTML：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
    <input type="text" id="input" class="input" value="" />
    <div id="main" class="main">
        <div id="header">Main</div>
        <div id="global1" class="global">
            Global1
            <div id="small11" class="small">aaaaaa</div>
            <div id="small12" class="small">aaabaa</div>
            <div id="small13" class="small">aaacaa</div>
            <div id="small14" class="small">aaadaa</div>
            <div id="small15" class="small">aaaeaa</div>
        </div>
        <div id="global2" class="global">
            Global2
            <div id="small21" class="small">abcdef</div>
            <div id="small22" class="small">fedcba</div>
            <div id="small23" class="small">facbde</div>
            <div id="small24" class="small">decfab</div>
            <div id="small25" class="small">bacfed</div>
        </div>
        <div id="global3" class="global">
            Global3
            <div id="small31" class="small">eeeeee</div>
            <div id="small32" class="small">eabdc</div>
            <div id="small33" class="small">bcdae</div>
            <div id="small34" class="small">dcbea</div>
            <div id="small35" class="small">eadcb</div>
        </div>
        <div id="global4" class="global">
            Global4
            <div id="small41" class="small">decab</div>
            <div id="small42" class="small">baced</div>
            <div id="small43" class="small">becad</div>
            <div id="small44" class="small">daceb</div>
            <div id="small45" class="small">cedab</div>
        </div>
        <div id="global5" class="global">
            Global5
            <div id="small51" class="small">cadeb</div>
            <div id="small52" class="small">cadeb</div>
            <div id="small53" class="small">cedab</div>
            <div id="small54" class="small">eadcb</div>
            <div id="small55" class="small">aebdc</div>
        </div>
    </div>
</body>
</html>

因此，如果“用户”在输入中输入：“aebdc”，它应该将#small55 背景颜色更改为黄色。如果在输入中只有一个：“a”，它应该改变所有 div 的背景颜色。显然，如果没有一个符合条件，则不会更改任何内容。

【问题讨论】：

好的，但是你的问题是什么？你有没有尝试写任何东西来做到这一点？如果是，请展示您的尝试，我们会找出问题所在
看起来你需要:contains()。我假设当你说输入 a 时，所有 div 都会改变，你的意思是除了 small31 => eeeeee 之外的所有 div，因为它没有 a在里面

标签： javascript jquery html css

【解决方案1】：

可以根据DIV的文本内容进行过滤

$('#input').on('input', function() {

    var value = this.value;

    $('.global div').css('background', '').filter(function() {
        return $(this).text().indexOf(value) !== -1;
    }).css('background', 'red');
});

FIDDLE

如果您需要不区分大小写的搜索，请将toLowerCase 添加到值和文本中。

【讨论】：

我可以看到它完全按照我在小提琴上的意思工作，但由于某种原因，我无法让它在我的网络上工作，不知道为什么。我很接近这个答案。试图让自己理解我错了，无论如何感谢您的时间！编辑：顺便说一句，我不需要“toLowerCase”

【解决方案2】：

JQuery

$('#input').on('input', function() {    
  var input = $('#input').val();

  if(input.length == 6) {
    $( ".global div:contains(" + input + ")" ).css( "background", "#" + input );
  }

});

【讨论】：

我并不是真的打算将 .global 更改为与条件匹配的那个，并将其更改为黄色。我一定是做错了什么，但至少我检查了我的代码并没有那么糟糕，因为你们所有人都在尝试我正在做的事情。谢谢，伙计！
我已经更新了一点，所以它不那么“滞后”@Roucher

【解决方案3】：

您需要使用:contains()进行过滤，然后使用text()将背景设置为div的文本值：

$('#input').on('input', function() {
  var value = this.value;

  // reset
  $('div.global div').css( "background-color", "inherit");
  
  // set new bgs
  $('div.global div:contains(' + value + ')').css( "background-color", function() {
    return '#' + $(this).text();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="input" class="input" value="" />
    <div id="main" class="main">
        <div id="header">Main</div>
        <div id="global1" class="global">
            Global1
            <div id="small11" class="small">aaaaaa</div>
            <div id="small12" class="small">aaabaa</div>
            <div id="small13" class="small">aaacaa</div>
            <div id="small14" class="small">aaadaa</div>
            <div id="small15" class="small">aaaeaa</div>
        </div>
        <div id="global2" class="global">
            Global2
            <div id="small21" class="small">abcdef</div>
            <div id="small22" class="small">fedcba</div>
            <div id="small23" class="small">facbde</div>
            <div id="small24" class="small">decfab</div>
            <div id="small25" class="small">bacfed</div>
        </div>
        <div id="global3" class="global">
            Global3
            <div id="small31" class="small">eeeeee</div>
            <div id="small32" class="small">eabdc</div>
            <div id="small33" class="small">bcdae</div>
            <div id="small34" class="small">dcbea</div>
            <div id="small35" class="small">eadcb</div>
        </div>
        <div id="global4" class="global">
            Global4
            <div id="small41" class="small">decab</div>
            <div id="small42" class="small">baced</div>
            <div id="small43" class="small">becad</div>
            <div id="small44" class="small">daceb</div>
            <div id="small45" class="small">cedab</div>
        </div>
        <div id="global5" class="global">
            Global5
            <div id="small51" class="small">cadeb</div>
            <div id="small52" class="small">cadeb</div>
            <div id="small53" class="small">cedab</div>
            <div id="small54" class="small">eadcb</div>
            <div id="small55" class="small">aebdc</div>
        </div>
    </div>

【讨论】：

【解决方案4】：

在这里

//bind input change event handler
jQuery("#input").on('change',function(){
 //input that user entered
 var input = jQuery(this).val();
 //for every .small class element do the following
 jQuery('.small').each(function(){
   //this is the text written in each div
   var text = jQuery(this).text().trim();
   //if user input is substring of text
   //then give it custom class
   //othervise remove that class
   if( input == text.substring(0,input.length) ){
     jQuery(this).addClass("match");
   }else{
     jQuery(this).removeClass('match')
   }
 })
})

.match{
  background-color: yellow;
}

<html>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="plantilla.css">
<script src="plantilla.js"></script>
<head>
<title>Plantilla</title>
</head>
<body>
    <input type="text" id="input" class="input" value="" />
    <div id="main" class="main">
        <div id="header">Main</div>
        <div id="global1" class="global">
            Global1
            <div id="small11" class="small">aaaaaa</div>
            <div id="small12" class="small">aaabaa</div>
            <div id="small13" class="small">aaacaa</div>
            <div id="small14" class="small">aaadaa</div>
            <div id="small15" class="small">aaaeaa</div>
        </div>
        <div id="global2" class="global">
            Global2
            <div id="small21" class="small">abcdef</div>
            <div id="small22" class="small">fedcba</div>
            <div id="small23" class="small">facbde</div>
            <div id="small24" class="small">decfab</div>
            <div id="small25" class="small">bacfed</div>
        </div>
        <div id="global3" class="global">
            Global3
            <div id="small31" class="small">eeeeee</div>
            <div id="small32" class="small">eabdc</div>
            <div id="small33" class="small">bcdae</div>
            <div id="small34" class="small">dcbea</div>
            <div id="small35" class="small">eadcb</div>
        </div>
        <div id="global4" class="global">
            Global4
            <div id="small41" class="small">decab</div>
            <div id="small42" class="small">baced</div>
            <div id="small43" class="small">becad</div>
            <div id="small44" class="small">daceb</div>
            <div id="small45" class="small">cedab</div>
        </div>
        <div id="global5" class="global">
            Global5
            <div id="small51" class="small">cadeb</div>
            <div id="small52" class="small">cadeb</div>
            <div id="small53" class="small">cedab</div>
            <div id="small54" class="small">eadcb</div>
            <div id="small55" class="small">aebdc</div>
        </div>
    </div>
</body>
</html>

【讨论】：