获取数据的价值，用jquery存储在数组中，存储在数组中

Get the value of data atribute and store in array with jquery and store in a array

本文关键字：数组 存储 数据 jquery 获取      更新时间：2023-09-26

可以计算div中的元素并将它们存储在数组中。

我创建了元素 data-head-ref 以了解它们属于内部元素的组。示例：data-head-ref='region' 包含区域的实际元素

动态创建和填充类似于以下结构的数组。如何获取属于jquery的数字和值。

这可能吗？

var headerBlockElements = {
   'region':  {
      'numberItems': 3, // the inside child elements
      'nameItems':  {
         “North”, “South”, “Center”
       }
   },
   'brands': {
      'numberItems': 2,
      'nameItems': {
         “Food”, “Autos”
      }
   }
}

我有以下示例在此处输入链接描述

<div class='column-header clearfix' data-head-ref='region'>
    <div class='header-inner'><span class='header-inner-title-dos'>Region</span></div>
    <div class='level-two' data-head='Nort'><span class='title'>Nort</span>
        <div class='level-three' data-option='EEUU'><span class='title'>EEUU</span></div>
        <div class='level-three' data-option='Canada'><span class='title'>Canada</span></div>
        <div class='level-three' data-option='Mexico'><span class='title'>Mexico</span></div>
    </div>
    <div class='level-two' data-head='Sout'><span class='title'>Sout</span>
        <div class='level-three' data-option='Venezuela'><span class='title'>Venezuela</span></div>
        <div class='level-three' data-option='Ecuador'><span class='title'>Ecuador</span></div>
        <div class='level-three' data-option='Argentina'><span class='title'>Argentina</span></div>
        <div class='level-three' data-option='Colombia'><span class='title'>Colombia</span></div>   
        <div class='level-three' data-option='Uruguay'><span class='title'>Uruguay</span></div>
    </div>
    <div class='level-two' data-head='Center'><span class='title'>Center</span>
        <div class='level-three' data-option='Panama'><span class='title'>Panama</span></div>
        <div class='level-three' data-option='Guatemala'><span class='title'>Guatemala</span></div>
        <div class='level-three' data-option='Honduras'><span class='title'>Honduras</span></div>
        <div class='level-three' data-option='Costa Rica'><span class='title'>Costa Rica</span></div>
    </div>
</div>
<div class='column-header clearfix' data-head-ref='Brands'>
    <div class='header-inner'><span class='header-inner-title-dos'>Brands</span></div>
    <div class='level-two' data-head='Food'><span class='title'>Food</span>
        <div class='level-three' data-option='Pizza Hut'><span class='title'>Pizza Hut</span></div>
        <div class='level-three' data-option='Burger King'><span class='title'>Burger King</span></div>
        <div class='level-three' data-option='Taco Bell'><span class='title'>Taco Bell</span></div>
    </div>
    <div class='level-two' data-head='Autos'><span class='title'>Autos</span>
        <div class='level-three' data-option='Toyota'><span class='title'>Toyota</span></div>
        <div class='level-three' data-option='Mazda'><span class='title'>Mazda</span></div>
        <div class='level-three' data-option='Volvo'><span class='title'>Volvo</span></div>
        <div class='level-three' data-option='Chevrolet'><span class='title'>Chevrolet</span></div>
        <div class='level-three' data-option='BMW'><span class='title'>BMW</span></div>
    </div>
</div>

当然。我对你到底想抓住什么有点不稳定，但这里有一些应该有帮助的东西。

预 JQuery 1.6

var customArray =[];
$('[data-head-ref]').each(function(){
     var Items = ""; 
     $("[data-head]", this).each(function(){
        if(Items.length!=0){Items +=",";}
        Items +=$(this).attr("data-head");
     });
     customArray[$(this).attr('data-head-ref')] =  {
             'numberItems': $("[data-head]", this).length, 
             'nameItems': Items}; 
});

JQuery 1.6 +

var customArray =[];
$('[data-head-ref]').each(function(){
     var Items = ""; 
     $("[data-head]", this).each(function(){
        if(Items.length!=0){Items +=",";}
        Items +=$(this).prop("data-head");
     });
     customArray[$(this).prop('data-head-ref')] =  {
             'numberItems': $("[data-head]", this).length, 
             'nameItems': Items}; 
});
相关文章：