javascript - 如何使用 jQuery 获取表单中的第一个唯一多值(数组标记)输入？

Question

我有这样一个表格:

<form>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="tag_id[]"></select>
    <select name="tag_id[]"></select>
    <select name="stack_id[]"></select>
    <!-- ... etc. -->
</form>

我想获得一个 jQuery 集合，其中包含按名称排列的第一个多值元素:

<form>
    <select name="user_id[]"></select>   <!-- this -->
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="tag_id[]"></select>    <!-- this -->
    <select name="tag_id[]"></select>    
    <select name="stack_id[]"></select>  <!-- this -->
    <!-- ... etc. -->
</form>

我从 $('[name$="[]"]') 开始，但我被困在那里了。是否有简单的选择器方法，或者我必须全部选择它们并过滤我想要的那些？

Answer 1

没有以这种方式选择元素的神奇方法，因此需要一些手动工作。

首先，按名称对元素进行分组:

var buckets = {}; // keys: "name" attribute values, values: arrays of elements
$('[name$="[]"]').each(function() {
    var name = this.name,
        bucket = buckets[name] || (buckets[name] = []);
    bucket.push(this);
});

然后您可以从每个桶中选择第一个元素并将其放入 jQuery 对象中:

// start with an empty jQuery object
var $firstOfEach = $([]);

// add to the above the first element inside each bucket
$.each(buckets, function() { $firstOfEach = $firstOfEach.add(this[0]); });

See it in action .