jquery数组相交

Posted 2023-02-22

【中文标题】jquery数组相交

【英文标题】：jquery arrays intersect

【发布时间】：2011-04-29 13:03:57

【问题描述】：

我之前将此问题发布为 jquery/javascript:arrays - jquery/javascript: arrays。 但是由于我是一个完整的初学者，所以我提出了错误的问题并且也没有理解答案.... :(

在未能实施给定的解决方案后，我又环顾四周，发现我需要比较 6 个可能的选择数组并将它们相交以最终仅显示重叠的值。

所以，希望这是一个更清晰的表述：

我有 6 个问题/6 组单选按钮用于回答。每个答案都有多个值（它们的范围可以从 1 到 38 个项目显示在最终的“建议”中）。我正在数组中收集检查过的收音机的值。我得到6个数组。

如何使 6 个数组相交以得到一个最终数组，该数组仅包含来自所有 6 个选项的相交值？ 如何将这个最终数组的项目转换为选择器？

有人可以帮帮我吗？ 谢谢！

我的脚本现在看起来像：

(function($)
  $.fn.checkboxval = function()
      var outArr = [];
      this.filter(':checked').each(function()
            outArr.push(this.getAttribute("value"));
      );
      return outArr;
  ;
)
(jQuery);
$(function()
  $('#link').click(function()
    var valArr1 = $('#vraag1 input:radio:checked').checkboxval();
    var valArr2 = $('#vraag2 input:radio:checked').checkboxval();
    var valArr3 = $('#vraag3 input:radio:checked').checkboxval();
    var valArr4 = $('#vraag4 input:radio:checked').checkboxval();
    var valArr5 = $('#vraag5 input:radio:checked').checkboxval();
    var valArr6 = $('#vraag6 input:radio:checked').checkboxval();
// var newArray = $.merge(valArr1, valArr2, valArr3, valArr4, valArr5, valArr6); <- test to see if I can merge them
// $('#output').text(newArray.join(',')); <- test to see if I can join them
//$("#output").html($("#output").html().replace(/,/gi, ',#diet')); <- test to see if I can append text so it looks like the selectors of divs I need to display later
//    return false;
  );
);

我的表单/输入看起来像：

<input name="vraag1" type="radio" value="1a,4,5,12,13,17a,18,19,22,23,24,26,27,28,29,30,33,38,6" class="radio advice" id="vraag1-0" /><label for="vraag1-0">ja</label>
<br />
<input name="vraag1" type="radio" value="1b,1,2,3,7,8,11,9,14,15,16,17,20,21,25,31,34,35,36,37,10,32" class="radio advice" id="vraag1-1" /><label for="vraag1-1">nee</label>
<br />
<input name="vraag1" type="radio" value="1c,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,17a,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38" class="radio advice" id="vraag1-2" /><label for="vraag1-2">maakt mij niet uit</label>

【问题讨论】：

这不是 $('#vraagX input:radio:checked').val();而不是 checkboxval() ?

@mplungjan: 当我改变 var valArr1 = $('#vraag1 input:radio:checked').checkboxval();到 var valArr1 = $('#vraag1 input:radio:checked').val();它不返回任何值

对不起，我评论的时候你有checkboxval功能吗？？？？如果是这样我的坏。但是它会过滤，所以对它的调用也是如此，所以至少这是一种浪费

没关系。是的，我同意你的看法，但由于缺乏更好的知识，我把它放在一起。关于如何相交 6 个数组的任何提示？谢谢。

【参考方案1】：

加载jQuery后，就可以在控制台打卡了：

a1=[1,2,3]
a2=[2,3,4,5]
$.map(a1,function(a)return $.inArray(a, a2) < 0 ? null : a;)

输出应该是：

[2, 3]

【参考方案2】：

只是想知道同样的事情并想出了这个：

$(["a","b"]).filter(["a","c"])

返回

["a"]

【讨论】：

太棒了！这是.filter 的预期应用吗？

@david-john-smith 上面的符号没有记录，但记录的是.filter 接受另一个 jQuery 对象作为参数。所以$(["a","b"]).filter($(["a","c"])) 是完全合法的。

@Christoph 提到的文档：api.jquery.com/filter/#filter-selection

【参考方案3】：

如果你想对数组做相交操作，你可以使用 jQuery 插件jQuery Array Utilities

这是一个如何使用它的示例代码行：

$.intersect([1, 2, 2, 3], [2, 3, 4, 5, 5])

将返回结果[2,3]

【讨论】：

我工作得很好，但你有一个拼写错误：相交，不是相交

感谢您的评论 :) 我已对答案进行了更正

这个intersect函数也支持任意数量的数组，这个包jquery-array-utilities也可以使用bower安装。我想添加一个我最初制作插件的免责声明 :)

【参考方案4】：

你的问题还是让我很困惑。

但您似乎正在从输入中获取价值并尝试将它们组合起来。但它们都是字符串而不是数组。

尝试将字符串加在一起，然后使用split() (demo) 将它们分开

$('#link').click(function() 
    var radios = '';
    $('input:radio:checked').each(function() 
        radios += $(this).val() + ',';
    )
    // remove last comma & convert to array
    radios = radios.substring(0, radios.length - 1).split(',');
    // do something with the array
    console.debug(radios);
)

---

更新：好的，从您的演示 HTML 中，我无法获得 6 个重复项，因此在演示中我将其设置为查找 3+ 个匹配项。我必须编写这个脚本来查找数组中的重复项，我还让它返回一个具有重复项数量的关联对象。可能有更好的方法，但这是我想出的（updated demo）：

$(function() 
    $('#link').click(function() 
        var radios = '';
        $('input:radio:checked').each(function() 
            radios += $(this).val() + ',';
        )
        // remove last comma & convert to array
        var results = [],
            dupes = radios
             .substring(0, radios.length - 1)
             .split(',')
             .getDuplicates(),
            arr = dupes[0],
            arrobj = dupes[1],
            minimumDuplicates = 6; // Change this to set minimum # of dupes to find

        // find duplicates with the minimum # required
        for (var i=0; i < arr.length; i++)
            if ( arrobj[arr[i]] >= minimumDuplicates )
                results.push(arr[i]);
            
        

        // Show id of results
        var diets = $.map(results, function(n,i) return '#diet' + n; ).join(',');
        $(diets).show(); // you can also slideDown() or fadeIn() here
    )
);


/* Find & return only duplicates from an Array
 * also returned is an object with the # of duplicates found
 * myArray = ["ccc", "aaa", "bbb", "aaa", "aaa", "aaa", "aaa", "bbb"];
 * x = myArray.getDuplicates();
 * // x = [ array of duplicates, associative object with # found]
 * // x = [ ['aaa','bbb'] ,  'aaa' : 5, 'bbb' : 2  ]
 * alert(x[0]) // x[0] = ['aaa','bbb'] & alerts aaa,bbb
 * alert(x[1]['aaa']) // alerts 5;
 */
Array.prototype.getDuplicates = function(sort) 
    var u = , a = [], b = , c, i, l = this.length;
    for (i = 0; i < l; ++i) 
        c = this[i];
        if (c in u) 
            if (c in b)  b[c] += 1;  else  a.push(c); b[c] = 2; 
        
        u[c] = 1;
    
    // return array and associative array with # found
    return (sort) ? [a.sort(), b] : [a, b];

【讨论】：

@fudgey：谢谢你的反应！我的目标是最终从这 6 个输入中仅获得重叠的值/字符串。如果我理解正确，我需要拆分字符串，这会给我价值吗？我希望我知道如何运行你的代码，虽然......我为我的菜鸟道歉......几乎把我的头发拉到这里......

你看演示了吗？另外，当您说重叠时，您的意思是所有 6 个组都需要具有相同的数字吗？...这是令人困惑的地方，因为您的示例 HTML（其他问题）在输入中只有一个值，而您上面的代码有不止一个。

是的，只需要返回所有 6 个组中出现的数字（或更多数字）。有 6 组收音机，第二组是：

eens oneens maakt mij niet uit

你在做什么用“17”和“17a”他们认为是一样的吗？您的问题令人困惑的原因就像您刚刚放入 cmets 的 HTML 一样......这些值是否应该代表已检查的答案？如果你把那个 HTML 放到 demo 中，你一次只能检查一个收音机，所以没有办法得到 6 个重复。

【参考方案5】：

请参阅Simplest code for array intersection in javascript 了解交集功能。使用 split(",") 拆分字符串，并对结果字符串数组进行交集。

【参考方案6】：

function intersect(a, b) 
    var aIsShorter = a.length < b.length;
    var shorter = aIsShorter ? a : b;
    var longer = aIsShorter ? b : a;

    return longer.filter(isFoundInOther).filter(isFoundOnce);

    function isFoundInOther(e) 
        return shorter.indexOf(e) !== -1;
    

    function isFoundOnce(element, index, array) 
        return array.indexOf(element) === index;
    

【讨论】：

注意为您的代码添加解释以及它如何回答 OP 的问题？