Javascript 循环创建对象

Question

我想创建一个对象，但目前还没有成功。

 var optionz = [];
$('ul > li > a').each(function( index ) {
    optionz [ $(this).attr('href') ] = $(this).children('img').attr('src');
//  alert($(this).attr('href')+ " " +$(this).children('img').attr('src'));
});  
$.each(optionz, function (index, value) {
    alert( index + ' : ' + value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="ul">
    <li><a href="gaga1.com"><img src="1.png"/></a></li>
    <li><a href="gaga2.com"><img src="1.png"/></a></li>
    <li><a href="gaga3.com"><img src="1.png"/></a></li>
    <li><a href="gaga4.com"><img src="1.png"/></a></li>
</ul>

我错过了什么？

Answer 1

您正在创建一个数组，但您没有将项目放入数组中。相反，您将属性添加到数组对象。当您遍历数组中的项目时，您将找不到任何项目，因为有 none.

改为创建一个对象，当您遍历对象属性时，您会找到放入其中的属性：

var optionz = {};

演示：

 var optionz = {};
$('ul > li > a').each(function( index ) {
    optionz [ $(this).attr('href') ] = $(this).children('img').attr('src');
//  alert($(this).attr('href')+ " " +$(this).children('img').attr('src'));
});  
$.each(optionz, function (index, value) {
    alert( index + ' : ' + value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="ul">
    <li><a href="gaga1.com"><img src="1.png"/></a></li>
    <li><a href="gaga2.com"><img src="1.png"/></a></li>
    <li><a href="gaga3.com"><img src="1.png"/></a></li>
    <li><a href="gaga4.com"><img src="1.png"/></a></li>
</ul>

Answer 2

因为你在数组中创建的键和值不是真正的对象，你应该这样创建：

 var optionz = [];
 $('ul > li > a').each(function (index) {
     var obj = {};
     obj[$(this).attr('href')] = $(this).children('img').attr('src');
     optionz.push(obj);
 });

$.each(optionz, function (index, value) {
   console.log( index + ' : ' + value );
});

或者您只能更改此：

var optionz = {};

Javascript 循环创建对象

Javascript loop create Object

javascript

each

object