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

您当前的代码调用tokenInput，但只传递一个字符串（DOM中遇到的第一个input元素的值。假设当{{{}时，这些哈希值存在于DOM中1}}加载，

document

在功能上等同于

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

与$("#tokens").tokenInput("Darren Criss");所期望的参数类型不匹配（请参阅http://loopj.com/jquery-tokeninput/#installation--setup）（您的第一个代码示例中似乎有正确的想法）。为什么不迭代jQuery tokenInput选择，将新的哈希对象推送到列表中，最后调用tokenInput，将完整列表传递给它：

input

修改

我和元素是什么？

我的方法是使用jQuery的内置迭代器函数$(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); });（http://api.jquery.com/jQuery.each/）。此实用程序函数允许程序员轻松迭代现有集合，包括对象，数组和jQuery选择。这是函数的签名（缺少一个更好的术语），如jQuery的文档中所示：

jQuery.each（集合，回调（indexInArray，valueOfElement））

您可以在任何可迭代的JavaScript对象上调用each（例如 - each），尽管在调用之前看到jQuery选择更常见。 foo.each(...);希望你传递一个接受两个参数的回调函数：一个索引/键参数和一个值/ item参数（作为旁注，你也可以访问each，一个隐含的参数引用回调体内的值/项。

this将为集合中的每个项调用此函数一次，根据迭代中的当前项自动为其传递适当的索引/键和值参数。 jQuery选择是可迭代的类似数组的对象：它们表现就像JavaScript数组一样，它们的“项目”可以使用数字索引引用（例如 - 调用each或$('div')[0]将返回对与$('div').get(0)选择器匹配的第一个DOM元素的引用（如果页面上存在div）。

当我们迭代jQuery选择时，我们迭代的'items'是对DOM元素的引用。在我的示例中，当我在jQuery选择上调用div并为其提供回调函数时，each被赋予选择中当前DOM元素索引的值，而i引用实际的元素。通常我们想在回调函数内的这些元素上调用jQuery方法。这要求我们将元素包装为jQuery对象（elem），允许我们使用jQuery的所有功能来操作元素。

传统上，在jQuery选择上调用$(elem)遵循以下形式：

each

进一步阅读jQuery对象：

http://www.elijahmanor.com/2013/02/jquery-object-quacks-like-array-duck.html

What is a jQuery Object?

什么是console.log（哈希）;

我只是添加了一个$('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(); });来探索生成的哈希列表。没有必要致电console.log()。

Answer 2

您作为源提供的内容不是哈希值，而是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);
});

一旦你拥有了哈希，我不确定你是怎么做的，但这应该让你开始。

从隐藏的哈希中在jquery中创建一个关联数组

2 个答案: