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

Create an associative array in jquery from hidden hashes

本文关键字：一个 数组 关联 创建 jquery 隐藏 哈希      更新时间：2023-09-26

我正在尝试从隐藏的哈希创建一个关联数组。下面的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>

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

  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);
});

编辑：

什么是 I 和 Elem？

我的方法是使用jQuery的内置迭代器函数each(http://api.jquery.com/jQuery.each/(。此实用程序函数允许程序员轻松迭代现有集合，包括对象、数组和 jQuery 选择。以下是函数的签名(因为缺乏更好的术语(，如jQuery的文档所示：

jQuery.each( collection， callback(indexInArray， valueOfElement( (

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

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

当我们迭代jQuery选择时，我们正在迭代的"项目"是对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
  • 什么是jQuery对象？

控制台.log(哈希(是什么;

我只是简单地包含一个console.log()，让您浏览生成的哈希列表。没有必要调用tokenInput 。

您作为源提供的不是哈希值，而是 HTML 输入标签。如果你想从中提取值，你可以使用 jquery 的 attr 函数。

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

我不确定一旦你有了哈希，你想用它们做什么，但这应该让你开始。

相关文章：