使用jQuery从JavaScript对象添加/删除项目 [英] Adding/removing items from a JavaScript object with jQuery

问题描述

我有一个Javascript对象如下：

I have a Javascript object as follows:

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

如果我想在此列表中添加/删除项目，我将如何使用jQuery进行操作？客户希望此列表可动态修改。

If I wanted to add/remove items to this list, how would I go about it using jQuery? The client wants this list to be dynamically modifiable.

推荐答案

首先，您的引用代码不 JSON。您的代码是JavaScript对象文字表示法。 JSON 是为便于解析而设计的一部分。

First off, your quoted code is not JSON. Your code is JavaScript object literal notation. JSON is a subset of that designed for easier parsing.

您的代码定义了一个对象（ data ），其中包含一个对象的数组（ items ）（每个对象都有一个 id ， name ， type ）。

Your code defines an object (data) containing an array (items) of objects (each with an id, name, and type).

你不需要或想要jQuery，只需JavaScript。

You don't need or want jQuery for this, just JavaScript.

添加项目

data.items.push(
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

这增加了结果。请参阅下面的中间添加。

That adds to the end. See below for adding in the middle.

删除项目：

那里有几种方法。 splice 方法是最通用的：

There are several ways. The splice method is the most versatile:

data.items.splice(1, 3); // Removes three items starting with the 2nd,
                         // ("Witches of Eastwick", "X-Men", "Ordinary People")

splice 修改原始数组，并返回你删除的项目数组。

splice modifies the original array, and returns an array of the items you removed.

在中间添加：

splice 实际上是添加和删​​除。 splice 方法的签名是：

splice actually does both adding and removing. The signature of the splice method is:

removed_items = arrayObject.splice(index, num_to_remove[, add1[, add2[, ...]]]);

• index - 开始进行更改的索引


• num_to_remove - 从该索引开始，删除这么多条目


• addN - ...然后插入这些元素


• index - the index at which to start making changes
• num_to_remove - starting with that index, remove this many entries
• addN - ...and then insert these elements

所以我可以像这样在第3个位置添加一个项目：

So I can add an item in the 3rd position like this:

data.items.splice(2, 0,
    {id: "7", name: "Douglas Adams", type: "comedy"}
);

说的是：从索引2开始，删除零项，然后插入以下项。结果如下所示：

What that says is: Starting at index 2, remove zero items, and then insert this following item. The result looks like this:

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "2", name: "Witches of Eastwick", type: "comedy"},
    {id: "7", name: "Douglas Adams", type: "comedy"},     // <== The new item
    {id: "3", name: "X-Men", type: "action"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

您可以删除一些并一次添加一些：

You can remove some and add some at once:

data.items.splice(1, 3,
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"}
);

...这意味着：从索引1开始，删除三个条目，然后添加这两个条目。结果如下：

...which means: Starting at index 1, remove three entries, then add these two entries. Which results in:

var data = {items: [
    {id: "1", name: "Snatch", type: "crime"},
    {id: "7", name: "Douglas Adams", type: "comedy"},
    {id: "8", name: "Dick Francis", type: "mystery"},
    {id: "4", name: "Ordinary People", type: "drama"},
    {id: "5", name: "Billy Elliot", type: "drama"},
    {id: "6", name: "Toy Story", type: "children"}
]};

这篇关于使用jQuery从JavaScript对象添加/删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！