分离第一个json元素并附加到不同的div？

Posted 2023-02-16

【中文标题】分离第一个json元素并附加到不同的div？

【英文标题】：detach first json element and append to a different div?

【发布时间】：2011-12-08 18:13:39

【问题描述】：

json:

   "storeList":
      "state":[
         
            "stateName":"Maine",
            "store":[
               
                  "storeName":"Store 1",
                  "storeID":"store1",
                  "storeURL":"http:\/\/www.sitename.com"
               ,
               
                  "storeName":"Store 2",
                  "storeID":"store2",
                  "storeURL":"http:\/\/www.sitename.com"
               ,
               
                  "storeName":"Store 3",
                  "storeID":"store3",
                  "storeURL":"http:\/\/www.sitename.com"
               
            ]
         ,
         
            "stateName":"Connecticut",
            "store":[
               
                  "storeName":"Store 1",
                  "storeID":"store1",
                  "storeURL":"http:\/\/www.sitename.com"
               
            ]
         
      ]
   

以及我在页面上呈现的功能：

$(document).ready(function() 
                    var object;
                    $.getJSON('xml/storeList.json', function(json) 
                        object = json;
                        $('#storeList').append('<ul/>')
                        $.each(object.storeList.state, function() 
                        var list = $('#storeList ul'),
                            listItem = $('<li/>'),
                            html = listItem.append($('<h3/>').text(this.stateName));

                        $.each(this.store, function() 
                            listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName));
                        );

                        list.append(html)
                        );
                    );

                    );

我想获取第一个“状态”对象并将其附加到与其他 div 不同的 div 中。 谢谢！我意识到 json 是一个数组，但我不确定 json 中的定位是如何工作的。

【参考方案1】：

你的问题标题说你想分离第一个元素。为此，您可以使用拼接：

   $.getJSON('xml/storeList.json', function(json) 
       object = json;

       var firstState = object.storeList.state.splice(0, 1)[0];
       //first state has been removed from the array and can be added anywhere

       $.each(object.storeList.state, function() 
          //each will now iterate over the remaining elements 
       );
   );

或者，如果你不想删除它，你可以直接使用它，然后用老式的非 jQuery for 循环来循环剩余的项目：

   $.getJSON('xml/storeList.json', function(json) 
       object = json;
       var currentState;

       var firstState = object.storeList.state[0];

       for(var i = 1; i < object.storeList.state.length; i++) 
          currentState = object.storeList.state[i];
       );
   );

【参考方案2】：

可以直接从$.each函数中获取当前值的索引。

$.each(object.storeList.state, function(index, value) 
  var div;
  if(index == 0) 
    div = $('#firstItemDiv');
   else 
    div = $('#otherItemsDiv');
  
  div.append(...);
);