Javascript jQuery多元素选择到jQuery对象数组

最初我有这样的想法：

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

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

它是jQuery对象的数组。我可以使用

rows[0]

获取第一个jQuery对象，并使用

rows[0][0]

获取第一个jQuery对象的“本机”DOM元素

然后我试着这样做：

var rows=$（“#查看内容>行>行内容”）

但是使用
行[0][0]
将不再有效，并返回
未定义的

我还尝试：

var rows=Array.from（$（'#view content>.row>.row content'）

但是
行[0][0]
仍然不起作用

因此，我想要的是一种简单的方法，将多元素jQuery选择器转换为jQuery对象的规则数组。我该怎么做？建议使用
eq
等等，这样技术上我就可以通过
$（“#admin view content>.row>.row content”）
选择和
.eq
将所有内容逐个循环到一个普通数组中，但我想知道是否有更优雅的方法

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

您可以使用jquery的
过滤器
和
映射

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

var rows=$（'#查看内容>.row'）
.filter（（i，v）=>i<4）//仅返回索引小于4的元素（索引基于0）
.map（（i，v）=>$（v）.find（“.row内容”）//映射并返回其内部行内容

注意


如果必须返回所有
行
的内部
。行内容
，则无需使用
过滤器

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

您可以使用jquery的
过滤器
和
映射

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

var rows=$（'#查看内容>.row'）
.filter（（i，v）=>i<4）//仅返回索引小于4的元素（索引基于0）
.map（（i，v）=>$（v）.find（“.row内容”）//映射并返回其内部行内容

注意


如果必须返回所有
行
的内部
。行内容
，则无需使用
过滤器
如果需要单个JQuery元素的数组，可以这样做：

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

然后行看起来像这样：

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

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

如果需要单个JQuery元素的数组，可以执行以下操作：

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

然后行看起来像这样：

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

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

虽然你已经接受了答案，但似乎你对自己尝试的误解还没有得到解决；因此，我将花一点时间尝试帮助您：

…我试着这么做：

但是使用
行[0][0]
将不再有效，并返回
未定义的

使用选择器可以检索jQuery对象，而不是jQuery对象数组；因此在本例中，使用
行[0]
将从jQuery对象返回本机DOM节点。使用
行[0][0]
试图检索检索到的DOM节点的第0个属性的值（如您所注意的，该属性未定义）

因此，显然，如果希望从给定索引中获取DOM节点，只需使用：

rows[<index>]


让arrayOfNodes=Array.from(
document.querySelectorAll（'p'）
).切片（0,4）；
阵列节点(
DOMNode=>DOMNode.style.color='limegreen'
);
第1段

第2款

第3款

第4段

第5段

第6段

第7段
虽然你已经接受了答案，但似乎你对自己尝试的误解尚未得到解决；因此，我将花一点时间尝试帮助您：

…我试着这么做：

但是使用
行[0][0]
将不再有效，并返回
未定义的

使用选择器可以检索jQuery对象，而不是jQuery对象数组；因此在本例中，使用
行[0]
将从jQuery对象返回本机DOM节点。使用
行[0][0]
试图检索检索到的DOM节点的第0个属性的值（如您所注意的，该属性未定义）

因此，显然，如果希望从给定索引中获取DOM节点，只需使用：

rows[<index>]


让arrayOfNodes=Array.from(
document.querySelectorAll（'p'）
).切片（0,4）；
阵列节点(
DOMNode=>DOMNode.style.color='limegreen'
);
第1段

第2款

第3款

第4段

第5段

第6段

第7段
请分享一个工作片段，演示您的问题。@gurvinder372当然可以。请稍等。
rows[0]
将返回本机DOM元素，其中包含
var rows=$（“#查看内容>行>行内容”）那么问题是什么？另请注意
var rows=[…]
和
var rows=$（'#查看内容>）
是不同的，因此它们的行为方式是相同的，为什么需要jQuery对象数组？
$（'#查看内容>.row>.row内容'）输出为数组。所有机械选择器。您可以访问
行[0]
@Satpal我想让应用程序获得所有这些元素，而不管它们有多少。代码的其余部分要求行[0]是jquery对象，行[0][0]是本机对象，因此我需要一个jquery对象数组来保持代码的其余部分正常工作。请共享一个工作片段来演示您的问题。@gurvinder372当然。请稍等。
rows[0]
将返回本机DOM元素，其中包含
var rows=$（“#查看内容>行>行内容”）那么问题是什么？另请注意
var rows=[…]
和
var rows=$（'#查看内容>）
是不同的，因此它们的行为方式是相同的，为什么需要jQuery对象数组？
$（'#查看内容>.row>.row内容'）输出为数组。所有机械选择器。您可以访问
行[0]
@Satpal我想制作应用程序