Question

是否可以在jQuery中合并3个或更多DOM对象？我在stackoverflow中找到了这个解决方案，但它只用于合并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()：

＆＃13;

$(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');
});

＆＃13;

<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" >

＆＃13;

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

2 个答案: