Question

我需要遍历我的项目，构建一个多维数组并以下列格式将其发送到另一个页面

item[22] = [2,4,55] item[56] = [54,33,535]

我的HTML结构看起来有点像这样：

<div data-item="22" class="item">
    <div data-val="2"></div>
    <div data-val="4"></div>
    <div data-val="55"></div>
</div>
<div data-item="56" class="item">
    <div data-val="54"></div>
    <div data-val="33"></div>
    <div data-val="535"></div>
</div>

我的ajax看起来有点像这样：

$.ajax({
   type: 'POST',
   url:  '/ajax.php',
   data: {
     'item': myArray
   },
   dataType : 'json',
   async: true
...

我想我可以从做这样的事情开始：

myArray= [];

$('.item').each(function(){
    var itemID = $(this).attr('data-item'),
        itemVal = ???;
    myArray.push([itemID , itemVal]);
});

但是，我不确定如何将值串起来。我是否为每个项目单独查看？

Answer 1

是的，您需要遍历每个data-val元素。

myArray = [];
$('.item').each(function() {
  myArray[$(this).attr('data-item')] = $(this).find('[data-val]').map(function() {
    return $(this).data('val')
  }).get();
});

snippet.log(JSON.stringify(myArray))

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-item="22" class="item">
  <div data-val="2"></div>
  <div data-val="4"></div>
  <div data-val="55"></div>
</div>
<div data-item="56" class="item">
  <div data-val="54"></div>
  <div data-val="33"></div>
  <div data-val="535"></div>
</div>

另外，我认为您可能希望将myArray用作键值对象，而不是数组。

Answer 2

喜欢这个！

myArray= [];

$('.item').each(function() {
  myArray[$(this).attr('data-item')] = $(this).find('div').map(function() {
    return $(this).data('val')
  }).get();
});

console.log(myArray);

Answer 3

尝试使用$.each()，$.map()来迭代.item，将对象的属性设置为.item data-item，值数组为.item个孩子data-val

＆＃13;

var item = {};
$.each($(".item"), function(index, el) {  
  item[Number($(el).data().item)] = $.map(el.children, function(elem, i) {
    return Number($(elem).data().val)
  });
  
});

console.log(item[22], item[56])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div data-item="22" class="item">
    <div data-val="2"></div>
    <div data-val="4"></div>
    <div data-val="55"></div>
</div>
<div data-item="56" class="item">
    <div data-val="54"></div>
    <div data-val="33"></div>
    <div data-val="535"></div>
</div>

＆＃13;

用jQuery构建多维数组

3 个答案: