3

idページ上のすべての DOM 要素を次のようにリストしています。

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

したがって、listy の出力例は次のようになります。

"home,links,stuff,things"

今、次のように listyArrayをに変換したいと思います。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()から得ました: Convert Array to Object

これは、似ているが異なる質問に私をもたらします:

ページ要素を 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呼び出して値「home」を取得する代わりに、既に呼び出し$('document > body > div > h1').attr('id')て同じ結果を得ることができます。

于 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を持つ要素の数
  • やりたい検索の数

最初のページが通常IDよりもCSSクラスが頻繁に使用される通常のHTMLページのように低く、2番目のページが十分に大きい場合、このパフォーマンステストは、連想配列が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

私のコード:

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 に答える
1

これをチェックしてくださいhttp://jsfiddle.net/ryan_s/XRV2m/

そうなる

  1. 新しい ID を生成するたびにパフォーマンスのオーバーヘッドが発生しないように、既存の要素の ID を格納するキャッシュを作成します。
  2. 渡したタグ名に基づいて増分 ID を自動生成します。
  3. 本当に ID を使用する予定がある場合は、キャッシュを更新してください。

便宜上、コンソールにIDを出力しているだけです。

他の人の返信に対する以前のコメントのいくつかに基づいて、私の 2 セントです。

于 2012-06-22T11:22:37.653 に答える