Question

最初我有这样的事情：

var rows = 
[
    $('#view-content > .row:nth-child(1) > .row-content'),
    $('#view-content > .row:nth-child(2) > .row-content'),
    $('#view-content > .row:nth-child(3) > .row-content'),
    $('#view-content > .row:nth-child(4) > .row-content')
];

这是一个jQuery对象数组。我可以rows[0]获取第一个jQuery对象，rows[0][0]获取第一个jQuery对象的“本机”DOM元素。

然后我试着这样做：

var rows = $('#view-content > .row > .row-content');

但使用rows[0][0]不再有效并返回undefined。

我也尝试过：

var rows = Array.from($('#view-content > .row > .row-content'));

但rows[0][0]仍无效。

所以我想要的是一个简单的方法将多元素jQuery选择器转换为 jQuery对象的reqular数组。我怎样才能做到这一点？ This one建议使用eq等等，所以从技术上讲，我可以将$('#admin-view-content > .row > .row-content')选项和.eq一个接一个地循环到正常数组中，但我不知道是否有更优雅的方式。

Answer 1

所以我想要的是一个简单的方法来转换多元素jQuery 选择器进入jQuery对象的reqular数组。

您可以使用 jquery＆＃39; map和var rows = $( '#view-content > .row' ) .filter( ( i, v ) => i < 4 ) //return only elements with index less than 4(index is 0 based) .map( (i, v) => $(v).find(".row-content") ); //map and return their inner row content

filter

注意

如果必须返回所有rows的内部.row-content，则无需>>>num = -234 -234 >>>num *= -1 234 >>>num 234。

Answer 2

如果你想要一个单个JQuery元素的数组，你可以这样做：

var rows = [];
$('#view-content > .row > .row-content').each(function () { rows.push(this); });

然后行看起来像这样：

[elem:JQueryElement, elem:JQueryElement, elem:JQueryElement]; // just a element array

Answer 3

虽然你已经接受了答案，但似乎你对你的尝试的误解尚未得到解决;所以我会花点时间尝试帮助：

......我试着这样做：

var rows = $('#view-content > .row > .row-content');

但使用rows[0][0]不再有效并返回undefined。

使用您的选择器检索jQuery对象，而不是jQuery对象数组;所以在这种情况下使用rows[0]将从jQuery对象返回本机DOM节点。使用rows[0][0]正在尝试检索检索到的DOM节点的第0个属性的值（正如您所注意到的那样，未定义）。

所以，显然，如果你想从给定的索引中获取DOM节点，你只需要使用：

rows[<index>]

...我想要的是一种将多元素jQuery选择器转换为jQuery对象的[常规]数组的简单方法。

考虑到您发布的代码以及该代码似乎试图做的事情，老实说，我不相信您真的想要一个jQuery对象数组，因为您的代码似乎试图从中检索常规DOM节点您创建的各种数组和对象。所以，虽然我稍后会回答你的明确问题，但我会先解决隐含的问题。

不幸的是，您没有提供任何代码，因此我将使用以下HTML来说明我的答案和方法：

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
<p>paragraph 7</p>

有很多方法可以创建DOM节点的数组，并将这些数组限制为前四个节点（索引0到3）。例如：

// using Array.from() to convert the Array-like
// static NodeList returned from document.querySelectorAll():
let arrayOfNodes = Array.from(
  document.querySelectorAll('p')
// slices that resulting Array to retain only the elements
// from an index of 0 up to - but not including - the index
// of 4:
).slice(0, 4);

// using the returned Array as a demo of successful selection:
arrayOfNodes.forEach(
  DOMNode => DOMNode.style.color = 'limegreen'
);

let arrayOfNodes = Array.from(
  document.querySelectorAll('p')
).slice(0, 4);

arrayOfNodes.forEach(
  DOMNode => DOMNode.style.color = 'limegreen'
);

<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
<p>paragraph 7</p>

使用jQuery你可以做同样的事情，然后使用jQuery Object本身而不是数组来操作这些元素：

// here we select all <p> elements with an index of less-than 4
// (the jQuery ':lt(4)' pseudo-selector):
$('p:lt(4)')
  // and then do something with those elements:
  .css('color','limegreen');

$('p:lt(4)').css('color','limegreen');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
<p>paragraph 7</p>

但是，如果在最初选择那些希望使用DOM节点的元素之后，您可以简单地将检索到的元素缓存在变量中，并访问特定的DOM节点或jQuery对象，如下所示：

// caching the <p> elements of index < 4:
let firstFour = $('p:lt(4)');

// using the jQuery Object, via the eq(<index>) method:
firstFour.eq(0).css('color', 'limegreen');

// using the DOM Node, via [<index>] notation:
firstFour[1].style.color = 'red';

let firstFour = $('p:lt(4)');

firstFour.eq(0).css('color', 'limegreen');

firstFour[1].style.color = 'red';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
<p>paragraph 7</p>

从上面我希望你明白为什么我认为你不需要一个数组（假设jQuery对象本身提供了对jQuery对象，与jQuery方法一起使用或对底层DOM的类似数组的访问权限）节点本身）。

现在，虽然我仍然不相信你实际上想要这个答案，但这是创建jQuery对象数组的一种方法：

// retrieve all the <p> elements:
let test = $('p')
  // slice the resulting, Array-like, jQuery Object
  // to retain only the first four elements:
  .slice(0, 4)
  // use map() to create an Array from the jQuery Object:
  .map(function(){
    // creating a jQuery Object from the current element,
    // and returning it to Array being formed:
    return $(this);
  });

// accessing the jQuery Object within the created Array,
// using [<index>] notation:
test[0]
  // chaining with a jQuery method to show that a jQuery
  // Object has been retrieved:
  .css('color', 'limegreen');

let test = $('p').slice(0, 4).map(function() {
  return $(this);
});

test[0].css('color', 'limegreen');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<p>paragraph 4</p>
<p>paragraph 5</p>
<p>paragraph 6</p>
<p>paragraph 7</p>

参考文献：

JavaScript的：
- Array.from()。
- Array.prototype.forEach()。
- Array.prototype.slice()。
- document.querySelectorAll()。
jQuery的：
- css()。
- eq()。
- :lt() Selector。
- map()。
- slice()。

jQuery对jQuery对象数组的多元素选择

3 个答案: