如何使用 jQuery 合并 2 个以上的 DOM 对象？

Question

是否可以在 jQuery 中合并 3 个或更多 DOM 个对象？我在 Whosebug 中找到了这个解决方案，但它仅用于合并 2 个对象：Merging jQuery objects

示例：

var input1 = $('.input-1'),
    input2 = $('#parent-div input'),
    input3 = $('.input-3'),
    input4 = $('.input-4'),
    input5 = $('.input-5')

    merge([input1, input2, input3, input4]).val('My custom input text');

在我的例子中，我有几个输入，但我只想合并其中的几个。

Answer 1

您可以创建一个仅遍历 jQuery 个对象数组的辅助函数：

function merge(jqs) {
  var obj = $();
  jqs.forEach(function (jq) {
    obj.add(jq);
  });
  return obj;
}

您也可以尝试这样的操作：

function merge(jqs) {
  return $(Array.prototype.concat.apply([], jqs.map(function (jq) { return Array.from(jq); })));
}

Answer 2

我们能否仅通过以下方式使用$.add():

$(document).ready(function(){
  var input1 = $('.input-1');
   var input2 = $('#parent-div input');
   var input3 = $('.input-3');
   var input4 = $('.input-4');
   var input5 = $('.input-5');
  
  var collection = $( input1 );
  // Capture the new collection
  collection = collection.add( input2).add(input3).add(input4);
  collection.val('My custom input text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" class="input-1" value="defualt text" >
<div id="parent-div">
  <input type="text" class="input-2" value="defualt text" >
  <input type="text" class="input-3" value="defualt text" >
</div>  
<input type="text" class="input-3" value="defualt text" >
<input type="text" class="input-4" value="defualt text" >
<input type="text" class="input-5" value="defualt text" >

如何使用 jQuery 合并 2 个以上的 DOM 对象？

How to merge more than 2 DOM objects using jQuery?

javascript

jquery

javascript-objects