依次通过一个数组与另一个数组与javascript [英] loop sequentially through an array with another array with javascript

问题描述

我有一个过滤器函数，需要根据输入字段的值检查一个元素数组。我最初使用 此解决方案 ，但它会重新评估

以下是 小提琴 我的情况 。

目前，如果我输入'fish'，它将只返回包含'fish'的行，到目前为止这么好。如果我也输入黄色，那么鱼黄，它返回鱼和鹦鹉，当我实际上只想返回鱼，因为它是唯一包含所有条款在输入字段中。

$ b

因此，不要像这样过滤：

输入值=Term1 Term2 Term3 Term1，再次启动，然后


Term2，启动


$ b

1. 再次，然后


2. Term3，再次开始...

有没有办法过滤这样的'jo'数组：

1. Term1，然后
   
2. Term1和Term2， / li>
   
3. Term1和Term2以及Term3等？

下面，输入字段到另一个数组，然后试图让它循环顺序通过所有的单词，但它不工作：（

HTML

 < input id =filter-fieldplaceholder =Searchtype =text/> 
 
< table cellspacing =0cellpadding =0> 
< thead> 
< tr> 
< th> Pet< th> 
< th> color< / th> 
 < / TR> 
< / thead> 
< tbody> 
< tr> 
< td> cat< / td> 
< td>白色< / td> 
< / tr> 
< tr> 
< td>狗< / td> 
< td>黑色< / td> 
< / tr> 
< tr> 
< td>鹦鹉< / td> 
< td>黄色< / td> 
< / tr> 
< tr> 
< td>鱼< / td> 
< td>黄色< / td> 
< / tr> 
< tr> 
< td>仓鼠< / td> 
< td>黑色< / td> 
< / tr> 
< / tbody> 
< / table> 
  

jQuery
< $ {
$ b // $（＃filter-field）。on（'input'，function（）{
$ b $ //将searchInput的当前值拆分
var data = this.value.split（），
inputLength = $（＃filter-field）.val（）。length;
$ b $ //创建一个jquery对象（tr）;

if（this.value ==）（
）
var jo = $（table> tbody jo.show（）;
return;
}

//隐藏所有行
jo.hide（）;

jo .filter（function（）{
var $ t = $（this），
textField = $（'＃filter-field'）.val（）.span（），
wordCount = textField.length - 1，//获取数组的长度，然后减1，使'word＃1'匹配数组


$ b // b我想这最终是[1,2,3,4等] o以某种方式检查每个单词对'jo'，但每个.push（）只是加1到第一个数组值
wordCounter.push（wordCount）;

//我想要检查'A字'，然后如果我输入更多的单词'A字和B字'等
if（$ t.is（：contains （''+ textField [wordCounter] +'）））{
return true;
} else {
return false;
}

}）。show（）;
}）;


解决方案

您接近问题的方式看起来很尴尬。我认为这样的事情应该可以正常工作：

  jo.filter（function（）{
 var $ t = $ （this），
 textField = $（'＃filter-field'）.val（）.split（）; 
 
 for（var i = 0; i< textField.length ;我++）
 {
 if（！$ t.is（：contains（'+ textField [i] +'）））
 {
 return false; 
} 
} 
返回true; 
 
}）。show（）; 
  

I have a filter function that needs to check an array of elements against the value of an input field. I originally used this solution, but it reassesses all results when a second or third term is entered.

Here's a Fiddle of my situation.

Currently, if I enter 'fish', it will return only the row containing 'fish', so far so good. If I also enter 'yellow', so 'fish yellow', it returns both 'Fish' and 'Parrot', when I actually want it to still only return 'Fish', as it's the only row that contains all terms in the input field.

So instead of filtering like this:

input value = "Term1 Term2 Term3"

1. Term1, start again, then
2. Term2, start again, then
3. Term3, start again...

Is there a way to filter the 'jo' array like this:

1. Term1, then
2. Term1 and Term2, then
3. Term1 and Term2 and Term3 etc?

Below, I tried pushing the number of words in the input field into another array, then trying to get it to loop sequentially through all the words, but it wasn't working :(

HTML

<input id="filter-field" placeholder="Search" type="text" />

<table cellspacing="0" cellpadding="0" >
    <thead>
        <tr>
            <th>Pet</th>
            <th>Colour</th>
        </tr>
    </thead>
    <tbody>
        <tr>    
            <td>cat</td>
            <td>white</td>
        </tr>
        <tr>
            <td>dog</td>
            <td>black</td>
        </tr>
        <tr>
            <td>parrot</td>
            <td>yellow</td>
        </tr>
        <tr>
            <td>fish</td>
            <td>yellow</td>
        </tr>
        <tr>
            <td>hamster</td>
            <td>black</td>
        </tr>
    </tbody>
</table>

jQuery

$("#filter-field").on('input', function() {

        // Split the current value of searchInput
        var data = this.value.split(" "),
            inputLength = $("#filter-field").val().length;

        // Create a jquery object of the rows
        var jo = $("table > tbody").find("tr");

        if (this.value == "") {
            jo.show();
            return;
        }

        // Hide all the rows
        jo.hide();

        jo.filter(function() {
            var $t = $(this),
                textField = $('#filter-field').val().split(" "),
                wordCount = textField.length - 1, // Get length of array, then subtract 1 so 'word #1' matches 'position 0' in array
                wordCounter = [];

            // I wanted this to end up as [1, 2, 3, 4 etc] to somehow check each word against 'jo', but each .push() simply adds 1 to the first array value
            wordCounter.push(wordCount);

            // I want this to check for 'word A', then if I enter further words, 'word A and word B' etc
            if ($t.is(":contains('" + textField[wordCounter] + "')")) {
                return true;
            } else {
                return false;
            }

        }).show();
});

解决方案

The way you are approaching the problem looks awkward. I think something like this should work fine:

        jo.filter(function() {
            var $t = $(this),
                textField = $('#filter-field').val().split(" ");

            for(var i=0; i<textField.length; i++)
            {
                if (!$t.is(":contains('" + textField[i] + "')"))
                {
                    return false;
                }
            }
            return true;

        }).show();

这篇关于依次通过一个数组与另一个数组与javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！