如何使用 jquery 使用多维数组

How to use multidimensional array using jquery

本文关键字：数组 何使用 jquery      更新时间：2023-09-26

我的页面中有带标题的列表项。我希望将标题文本放在一个数组中，然后在单击事件时创建一个新数组并将列表项推送到它们。小提琴。

预期成果：

Arr = ['small alpha', 'big alpha', 'number'];
Arr['small alpha'] = ['a','b','c'];

法典：

var Arr = [];
$('a').click(function() {
    Arr.push($(this).closest('ul').find('h2').text());
    alert(Arr['small alpha'])
    Arr[0].push($(this).closest('ul').find('li').text());
    console.log(Arr)    
});

将Arr[0]转换为数组

您在此处尝试执行的操作的最初问题是Arr[0]不是数组。如果您的代码工作正常(通过将"小 alpha"h2元素拉入位置 0 的 Arr 元素(，Arr[0]将是一个字符串。

Arr[0] === "small alpha";

因此，在调用Arr[0].push()时，您尝试对字符串调用数组方法。这将引发错误：

未捕获的类型错误：对象小 alpha 没有方法"推送">

为了纠正这一点，我们需要简单地通过声明Arr[0] = []将Arr[0]转换为数组：

...
Arr[0] = [];
Arr[0].push($(this).closest('ul').find('li').text());
...

修复代码

首先，您需要将h2文本存储到可重用的变量中：

var key = $(this).closest('ul').find('h2').text();
在

这一点上，值得注意的是，h2元素不允许是ul元素的子元素，因此您的 HTML 在其当前状态下无效。您需要自己解决此问题并提出不同的选择器，但对于此答案的其余部分，我将使用当前存在的内容。

由于我们将其用作键，因此不需要将此值推送到数组中，因此我们完全删除了第一个push()调用。

与其使用 Arr[0] 来引用您的密钥，不如使用 Arr[key] .我们现在需要创建内部数组并将li文本推送到其中：

Arr[key] = [];
Arr[key].push($(this).closest('ul').find('li').text());

总的来说，您的代码现在将如下所示：

var Arr= [];
$('a').click(function(){
    var key = $(this).closest('ul').find('h2').text();
    Arr[key] = [];
    Arr[key].push($(this).closest('ul').find('li').text());
    console.log(Arr)    
});

其结果是：

[小阿尔法：数组 1]
--- 0："abC">

JSFiddle demo.

将每个li文本分别推送到数组中

上述代码的问题在于所有li值都压缩为一个：Arr['small alpha'] === ["abC"] 。为了解决这个问题，我们可以引入 jQuery map() 方法。

我们现在不是调用...find('li').text()，而是使用map()将每个li的文本映射到一个数组中：

$(this).closest('ul').find('li').map(function() { return $(this).text() }).get()

总的来说，您的代码现在如下所示：

var Arr= [];
$('a').click(function(){
    var key = $(this).closest('ul').find('h2').text();
    Arr[key] = [];
    Arr[key].push($(this).closest('ul').find('li')
        .map(function() { return $(this).text() }).get());
    console.log(Arr)    
});

其结果是：

[小阿尔法：数组 1]
...0："a">
...1："b">
...2："C">

最终的 JSFiddle 演示。

如果你点击所有三个"获取"链接，你最终会得到：

Arr
    ['small alpha']
        ['a', 'b', 'C']
    ['big alpha']
        ['A', 'B', 'C']
    ['number']
        [1, 2, 3]

您可以使用 JavaScript 对象

http://javascript.ru/Object

使用类似逻辑的东西。

var arr = [
    ['member1','member2'],
    ['member3','member4']
];
arr [0][0] == 'member1';
arr [0][1] == 'member2';
arr [1][0] == 'member3';
arr [1][1] == 'member4';

查看答案 JavaScript 多维数组

看到这个jsFiddle

var Arr= [], Arr2 = {};

$('a').click(function(){
var ht = $(this).closest('ul').find('h2').text(), a = [];
Arr.push(ht);
    $(this).closest('ul').find("li").each(function () {
        a.push($(this).text());
    })
Arr2[ht] = a;
console.log(Arr);
console.log(Arr2);
})
相关文章：