3

我列出id了页面上的每个 DOM 元素：

 var listy = $("*[id]").map(function(){
    return this.id;
 }).get().join(',');

因此，listy 的示例输出将是：

"home,links,stuff,things"

现在我想将 listy 转换Array为Object，例如：

function toObject(arr) {
    var rv = {};
    for (var i = 0; i < arr.length; ++i)
        if (arr[i] !== undefined) rv[i] = arr[i];
    return rv;
}

但这会将所有内容都放在一个Object类似的位置：

0: "h", 1: "o", 2: "m", etc...

我显然想要的是：

0: "home", 1: "links, 2: "stuff", etc..

我哪里错了，我得到了toObject()来自：将数组转换为对象

这让我想到了一个类似但不同的问题：

将页面元素索引到 JSON 对象？还是每次都使用 jQuery 选择器呢？

4

5 回答 5

5

你listy是一个字符串，而不是一个数组。将您的第一个代码块更改为：

 listy = $("*[id]").map(function(){
    return this.id;
 }).get();

http://jsfiddle.net/P7YvU/

至于创建索引整个文档的对象：出于什么目的？当您可以直接解析 DOM 时，自己执行此操作几乎没有什么优势——尤其是因为 jQuery 使它变得如此简单。DOMJSONTHING.body.div.h1您已经可以调用$('document > body > div > h1').attr('id')并获得相同的结果，而不是调用来获取值“home”。

于 2012-06-20T13:15:09.693 回答
3

这可能是您可以编写的用于获取对象的最短代码：

// your existing code (a tiny bit changed)
var idArray = $("*[id]").map(function() {
    return this.id;
}).get();

// this one liner does the trick
var obj = $.extend({}, idArray);

解决问题的更好方法 - 关联数组

但是正如我在其他答案中的评论中所读到的那样，这个对象结构在您的情况下可能不是最好的。你想要的是检查一个特定的 ID 是否已经存在。这个对象

{
    0: "ID1",
    1: "otherID",
    ...
}

不会有太大帮助。一个更好的对象将是您的关联数组对象：

{
    ID1: true,
    otherID: true,
    ...
}

if因为这将使通过在语句中使用此条件进行简单检查来确定特定 ID 变得简单：

if (existingIDs[searchedID]) ...

所有不存在的 ID 都将不符合此条件，并且所有确实存在的 ID 都将返回true。但是要将您的 ID 数组转换为该对象，您应该使用以下代码：

// your existing code (a tiny bit changed)
var idArray = $("*[id]").map(function() {
    return this.id;
}).get();

// convert to associative "array"
var existingIDs = {};
$.each(idArray, function() { existingIDs[this] = true; });

或给定所需的结果，您可以对其进行更多优化：

var existingIDs = {};
$("*[id]").each(function() { existingIDs[this.id] = true; });

这将最大限度地加快您现有的 ID 搜索速度。只要您可以在 O(1) 中获取有关 ID 存在的信息，检查 ID 唯一性可能不需要分层对象结构。上层关联数组对象将为您提供这种超快速的可能性。当您创建一个具有新 ID 的新对象时，您可以轻松地将其添加到现有的关联数组对象中，只需执行以下操作：

existingIDs[newID] = true;

就是这样。新 ID 将与其他 ID 一起缓存在同一个关联数组对象中。

注意：我可以看到您的代码隐含了全局（listy变量）。小心并尽可能避免。

性能测试

正如@Blazemonger 所暗示的那样，这并不成立，我会说这种说法可能是正确的。这一切都归结为：

  • 您拥有的具有 ID 的元素数量
  • 您想要进行的搜索次数

如果第一个通常像在常规 HTML 页面中一样低，其中 CSS 类比 ID 更频繁地使用，并且如果第二个足够大，那么这个性能测试证明关联数组可以比单独使用 jQuery 快一点。此测试中使用的 HTML 是 Stackoverflow 在移动网站上的问题列表的副本（因此我从源代码中删除脚本的工作较少）。我特意举了一个真实世界网站内容的例子，而不是准备好的测试用例，可以故意制造它以支持一种或另一种解决方案。

如果您的搜索规模要小得多，那么我使用直接的 jQuery 会更快，因为它不需要启动关联数组准备并立即开始搜索。

于 2012-10-08T09:30:31.367 回答
2 
var str = 'home,links,stuff,things',
    obj = {};

$.each(str.split(','), function(index, val) {
    obj[index] = val;
});

演示

于 2012-06-20T13:15:28.327 回答
1

看看这个http://jsfiddle.net/ryan_s/XRV2m/

它会

  1. 创建一个缓存来存储现有元素的 id，这样每次生成新 id 时就不会产生性能开销。
  2. 根据您传递给它的标签名称自动生成增量 id。
  3. 如果您真的打算使用 id，请更新缓存。

为了方便起见，我只是在控制台上打印 id。

只是我的 2 美分，基于您之前对其他人回复的一些评论。

于 2012-06-22T11:22:37.653 回答
1

我的代码：

jQuery.ajax({
        type: 'POST',                    
        url:'../pages/HomePage.php',            
        data:{param  : val},
        dataType:'HTML',                
        success: function(data)
        {
            var data = data ;
            obj = {};



             $.each(data.split(','), function(k, v) {
                 obj[k]= v;
            alert("success"); 

         $("#process_des").val(obj[0]);
             });

        }
    });

我的输出

Array
(
    [0] => FILLET SKIN OFF
    [1] => SF
)
于 2013-07-03T07:17:53.743 回答