如何使用 Jquery 过滤器？答案

【问题标题】：How to use Jquery filter?如何使用 Jquery 过滤器？
【发布时间】：2023-03-28 05:30:01
【问题描述】：

html:

<div class="searchChkBoxDiv"><input id="searchchk_input"></div>
<div class="searchElemDiv"></div>

js:

var checkBoxVals = ["sandeep", "suresh", "rajesh", "ramesh", "pad"];
for(var i = 0; i<checkBoxVals.length; i++){
            $('.searchElemDiv').append('<div id='+checkBoxVals[i]+'><input type="checkbox"><span>'+checkBoxVals[i]+'</span></div>');
          }

我有上面的代码，我想过滤java脚本添加的searchElemDiv中的元素。

我尝试如下，但无法捕获数组中过滤器过滤的元素。

  $('#searchchk_input').keyup(function(){
        var val = $(this).val();
        $('.searchElemDiv').empty();
        var opt = checkBoxVals.filter(function(idx, el) {
            return val === '' || el.indexOf(val) == 0;
            });
        for(var i=0; i<opt.length; i++){
            $('.searchElemDiv').append('<div id='+opt[i]+'><input type="checkbox"><span>'+opt[i]+'</span></div>');
            }
      });

当我给出第一个键时，它会从 searchElemDiv div 中删除所有元素，当再次从输入框中删除整个输入时，searchElemDiv 会在页面加载时填充所有元素，但在单个字符之间也不起作用。

你能帮我解决一下吗？

【问题讨论】：

checkBoxVals 不是jQuery-object
stackoverflow.com/a/14274386/3986045 我按照上面的答案在选择框中实现了搜索。并尝试实现它以在 div 元素中进行搜索。
感谢大家帮助我。我将上面的代码更改为 var opt = checkBoxVals.filter(function(element, index) { return val === '' || element.indexOf(val) == 0; });现在它工作正常。谢谢@Quentin Roger。

标签： javascript jquery html

【解决方案1】：

过滤器的回调返回三个参数：

// the first is for the value the second for the index
function callbackfn(value, index, array1)

看看这里：

https://msdn.microsoft.com/en-us/library/ff679973(v=vs.94).aspx

一个小例子：

var checkBoxVals = ["sandeep", "suresh", "rajesh", "ramesh", "pad"];

var opt = checkBoxVals.filter(function(el, idx, array) {
  console.log("index :"+idx);
  console.log("element :"+el);
  console.log("the full array :"+array);
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

谢谢，我想我可以互换使用索引和元素。我修改为 var opt = checkBoxVals.filter(function(idx, el) { return val === '' || idx.indexOf(val) == 0; });现在它工作正常。
很高兴为您提供帮助，欢迎来到 SO。如果此答案或任何其他答案解决了您的问题，请将其标记为已接受。
JQuery 3 的语法不同

【解决方案2】：

       Ex:
       <ul>
            <li>City 1</li>
            <li>City 2</li>|
            <li>City 3</li>
            <li>City 4</li>
            <li>City 5</li>
        </ul>
a.  .eq(): Get DOM element from specified index. The indexes start from 0
    Ex: $('li').eq(2).css('background-color', 'red');

b.  .first():Gets the first DOM element
    Ex: $('li').first().css('background-color', 'red'); // first index = 0

c.  .last(): Gets the last DOM element
    Ex: $('li').last().css('background-color', 'red'); // first index = 0

d.  .filter():You can filter elements by selecter or by index
    Ex: $('li').filter(':odd').css('background-color', 'red'); //index start from 1.

    //If you want to make the first and fourth elements have a red background then your script would be
   //index start from 0.
        $('li').filter(function(index){
        if(index == 1 || index == 4)
        {
            $(this).css('background-color', 'red');
        }
        });

e.  .has():If you want to check for some condition then the .has() function can be used.
    Ex: $('li').has('a').css('background-color', 'red'); //Check the <a> tag

f.  .not():  If you want to make all the odd items red then your script would look like:
    Ex: $('li').not(':even').css('background-color', 'red'); //index start from 0.

【讨论】：