從隱藏的哈希在jquery中創建一個關聯數組

Question

我想從隱藏的哈希創建一個關聯數組。下面的jquery調用特定的哈希值，但我想用一個代碼動態創建它。

$(document).ready(function() { 
    $("#tokens").tokenInput([ 
     {id: 1, name: "Darren Criss"}, 
     {id: 2, name: "Ann Arbor T-shirt Company"}, 
     {id: 3, name: "StarKid Product Store"}, 
    ]); 
}); 

我試着這樣做：

$(document).ready(function() { 
    var variable = $("input[type='hidden'][class='stores']").val(); 
     $("#tokens").tokenInput(variable); 
}); 

，但它不工作。

這裏的哈希

<input id="1" class="stores" type="hidden" value="Darren Criss" taxonomies_count="9" 
name="1" disabled="disabled"></input> 

<input id="2" class="stores" type="hidden" value="Ann Arbor T-shirt Company" 
taxonomies_count="46" name="2" disabled="disabled"></input> 

<input id="3" class="stores" type="hidden" value="StarKid Productions Store" 
taxonomies_count="22" name="3" disabled="disabled"></input> 

Answer 1

你給作爲源有什麼不散列但HTML輸入標籤。如果你想從中提取數值，你可以使用jquery's attr function。

$(function(){ 
    var tokens = $('.stores').map(function(index, el) { 
    var element = $(el) 
    return { 
     id: element.attr('id'), 
     name: element.attr('value') 
    } 
    }) 
    $("#tokens").tokenInput(tokens); 
}); 

我不確定你想要用哈希做什麼，一旦你有它們，但那應該讓你開始。

Answer 2

您當前的代碼調用tokenInput，但僅通過它的單個字符串（在DOM中遇到的第一個input元素的值。假設這些散列存在於DOM當document負載，

var val = $("input[type='hidden'][class='stores']").val(); 
    $("#tokens").tokenInput(val); 

在功能上等同於

$("#tokens").tokenInput("Darren Criss"); 

不匹配的那種由tokenInput預期的說法（見http://loopj.com/jquery-tokeninput/#installation--setup）（你似乎有右擊在你的第一個代碼示例中的想法）。爲什麼不遍歷一個jQuery input選擇，推新的哈希對象到一個列表，最後，調用tokenInput，它傳遞的完整列表：

$(document).ready(function() { 
    var hashes = []; 
    $('input.stores').each(function(i, elem) { 
     hashes.push({ 
      'id': $(elem).attr('id'), 
      'name': $(elem).val(), 
     }); 
    }); 
    console.log(hashes); 
    //$('#tokens').tokenInput(hashes); 
}); 

編輯：

什麼我和elem？

我的方法是使用jQuery的內置迭代函數each（http://api.jquery.com/jQuery.each/）。這個實用函數允許程序員輕鬆地遍歷現有的集合，包括對象，數組和jQuery選擇。下面是函數的簽名（因爲缺乏一個更好的詞）所看到jQuery的文檔：

jQuery.each（收集，回調（indexInArray，valueOfElement））

您可以在任何可迭代的JavaScript調用each對象（例如 - foo.each(...);），儘管在調用之前看到jQuery選擇更爲常見。 each期望您傳遞一個回調函數，該函數接受兩個參數：一個索引/鍵參數和一個值/項參數（作爲附註，您還可以訪問this，引用值/項的隱式參數）回調的主體。

each將爲集合中的每個項目調用一次該函數，根據迭代中的當前項目自動爲您傳遞相應的索引/鍵和值參數。 jQuery的選擇是可迭代陣列狀對象：它們表現如JavaScript陣列，以及他們的「項目」可以使用數值索引來引用（例如 - 調用$('div')[0]或$('div').get(0)將基準返回到div選擇器匹配的第一DOM元素，如果一個div存在於頁面上）。

當我們遍歷jQuery選擇時，我們迭代的'items'是對DOM元素的引用。在我的示例中，當我在jQuery選擇上調用each併爲其提供回調函數時，i被賦予當前DOM元素的索引值，而elem引用實際元素。我們經常想要在回調函數內的這些元素上調用jQuery方法。這要求我們將換成這個元素作爲jQuery對象（$(elem)），允許我們使用jQuery的所有功能來操作元素。

以往，在一個jQuery選擇主叫each如下這種形式：

$('your selector here').each(function(i,elem) { 
    var foo = $(elem); //Allows us to treat the DOM element as a jQuery object 
    //Do stuff ... foo.val().attr().css().toggle(); 
}); 

jQuery的對象延伸閱讀：

• http://www.elijahmanor.com/2013/02/jquery-object-quacks-like-array-duck.html
• What is a jQuery Object?

和console.log（散列）;

我只是簡單地包含了一個console.log()讓你探索生成的散列表。這是沒有必要撥打tokenInput。