Question

是否有将[$(div), $(span), $(li)]转变为$(div, span, li)的优雅方式？

我需要的是一个jQuery包装的元素集，而不是jQuery元素数组。我希望尽可能少地使用代码行，并使用最少的（如果有的话）循环。

编辑：对于那些对此问题感到困惑的人，使用console.log在已经选择了的元素数组上从firebug复制并粘贴此代码

Answer 1

jQuery's map() function非常适合重塑数组和/或jQuery集合。

所以，给这样的数组：

var arrayOfJQ_Objects = [$("div"), $("span"), $("li")];

这一行代码就是您所需要的（See it in action at jsFiddle）：

$(arrayOfJQ_Objects).map (function () {return this.toArray(); } );

导致Firebug中的此控制台显示：

jQuery(div, span, li)

另请参考jQuery's .toArray() function。

Answer 2

如果真正意味着如何转换：

[$(a), $(b), $(c)]

进入结果：

$(a, b, c)

然后你可以使用add函数将每个jQuery对象添加到另一个jQuery对象：

var x = $();  // empty jQuery object
$.each([$(a), $(b), $(c)], function(i, o) {x = x.add(o)});

此时，x将包含一个组合的jQuery对象，它是数组中前面的a，b和c jQuery对象的组合。

没有each()循环，我找不到任何办法。 add()函数接受一个DOM元素数组作为参数，但（至少根据the documentation），而不是jQuery对象的数组。

或者，您可以将每个jQuery对象转换为DOM元素，这可能会更高效，因为它最终只生成一个新的jQuery对象：

$([$(".a"), $(".b"), $(".c")].map(function(o) { return o.get() }));

Answer 3

您可以使用add方法将jQuery对象中的元素复制到另一个对象。这会将数组source中每个jQuery对象的所有元素复制到jQuery对象items中：

// Create an empty jQuery object
var items = $([]);
// Add the elements from each jQuery object to it
$.each(source, function(){ items = items.add(this); });

（在版本1.3.2之前，add方法不支持添加jQuery对象，因此您需要使用items.add(this.get());。）

Answer 4

比接受的答案更简洁，可以使用$.fn.toArray作为传递给$.fn.map的参数：

var list = [$('<a>'), $('<b>'), $('<i>')];

$(list).map($.fn.toArray);

或许（这真的很差，但在代码中只有一个函数调用）：

$.fn.map.call(list, $.fn.toArray);

Answer 5

假设你有一个jQuery元素数组：

let elementList = [$("selector1"), $("selector2"), $("selector3"), ...];

你可以直接在数组上使用jQuery函数（$()），它将返回一个jQuery集：

let jQuerySetOfElements = $(elementList);

Answer 6

编辑：我认为jQuery支持所有Array方法，但不，所以这是我的初始解决方案的工作版本，虽然它有点奇怪，因为我坚持使用相同的方法：

var set; // The array of jQuery objects, 
         // but make sure it's an Array.
var output = set.pop();
$.each(set, function (_, item) { 
    return [].push.call(output, [].pop.call(item));
});

Answer 7

添加单个元素：

var $previousElements = $();
$previousElements.add($element);

将数组转换为jQuery元素集：

var myjQueryElementArray = [$element1, $element2, $elementN];
$(myjQueryElementArray ).map (function () {return this.toArray(); } );

将元素数组添加到现有元素：

var $previousElements = $(),
     myjQueryElementArray = [$element1, $element2, $elementN];

$previousElements.add($(myjQueryElementArray).map (function () {return this.toArray(); } ));

Answer 8

如果您的环境支持Array.prototype.reduce()。

var jQueryCollection = [$("a"), $("div")]
                          .reduce(function (masterCollection, collection) {
                               return masterCollection.add(collection);
                          }, $());

jsFiddle

Answer 9

你可以这样做：

var $temp = $();
$.each([$("li"), $("li"), $("li")], function(){
    $temp.push(this[0]);
})

$在一个jQuery选择器中临时所有元素

但我很好奇是什么让你在这种情况下拥有一系列不同的jQuery元素。您知道可以使用逗号选择不同的元素吗？比如$("li, ul > li:eq(0), div")

Guffa指出，

编辑，这只会添加每个部分的第一个元素。 .add()是.push()比{{1}}更好的选择。

Answer 10

很久以前我也遇到类似的问题。我的表单很大，需要获取每个input。因此，我的想法是将每个input作为jQuery对象，并将其转换为jQuery包装的元素集。我怎样才能做到这一点？好吧，这是您的问题的解决方案。

首先，您需要创建一个空数组作为jQuery对象，例如：let fields = $([]);。
现在，在此示例中，使用包含选择器表达式的字符串来获取所需的元素：'form#details :input'作为jQuery对象。
然后使用.each方法提取所需的信息，并将jQuery对象添加到jQuery集包装器中：fields = fields.add(input);

您如何应用此问题？

如果您有元素let elements = [$('#gw_id'), $('#erv_id'), $('#name')];的列表，则可以将$('form#details :input')替换为elements;

另一种替代方法是使用.reduce vanilla js。在此let set = $(elements.reduce((acc, cur) => {return acc.concat(cur.get())}, []));代码段中，我们使用elements数组并应用reduce reduce有4个参数，但是我们可以将前两个参数accumulator用作acc， currentValue与cur一样，我们也使用Arrow函数（=>）减少了回调。在此回调中，我们将每个当前值连接到一个新数组中。最后，将返回数组包装到jQuery对象$()中。您也可以将elements替换为$('form#details :input')。

let fields = $([]);
let elements = [$('#gw_id'), $('#erv_id'), $('#name')];

$(function() {
  console.log('List of fields: ');
  $('form#details :input').each((index, value) => {
    let input = $(value);
    let id = input.attr('id');
    let type = input.attr('type');

    fields = fields.add(input);
    if (id && type == 'text') {
      console.log('Input: ' + id + ' | Text: ' + type);
    }
  });
  fields.addClass('ui-state-error');


  let set = $(elements.reduce((acc, cur) => {
    return acc.concat(cur.get())
  }, []));

  console.log('Set list: ');
  set.each((index, value) => {
    let input = $(value);
    let id = input.attr('id');
    let type = input.attr('type');
    console.log('Input: ' + id + ' | Text: ' + type);
  });
});

.ui-state-error {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="details">
  <fieldset>
    <p>
      <label for="gw_id">GW Id</label>
      <input type="text" name="gw_id" id="gw_id" value="" class="text ui-widget-content ui-corner-all">
    </p>
    <p>
      <label for="erv_id">ERV Id</label>
      <input type="text" name="erv_id" id="erv_id" value="" class="text ui-widget-content ui-corner-all">
    </p>
    <p>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
    </p>
    <p>
      <label for="description">Description</label>
      <input type="text" name="description" id="description" value="" class="text ui-widget-content ui-corner-all">
    </p>
    <input type="hidden" name="no" id="no" value="23" disabled readonly>
    <!-- Allow form submission with keyboard without duplicating the dialog button -->
    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
  </fieldset>
</form>

Answer 11

$('li').each(function(){
    $(this).doSomething();

}）

将jQuery元素数组转换为jQuery包装元素集

11 个答案:

您如何应用此问题？