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]); });

看到它在行动。