Question

我有一个从HTML列表中生成的对象数组，我遇到了处理数组以获取项目索引和数组长度的问题，总是得到零。

我想要data-id和value（列表1,2,3 ..）。

HTML代码

<ul class="list">
    <li data-id="l1">list 1</li>
    <li data-id="l2">list 2</li>
    <li data-id="l3">list 3</li>
    <li data-id="l4">list 4</li>
</ul>
<p></p>

JS代码

var arr = new Array();

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr[lid] = lval;
});

$('p').html('array length = ' + arr.length + ' & index of list 1 is ' + arr.indexOf('l1'));

我是javascript和jQuery的新手，我不知道我的语法是否有错误。请查看此fiddle

Answer 1

请尝试使用arr.push(lval);：

您正在尝试使用l1作为要添加数据的索引，但l1是一个字符串，索引必须是数字。 .push()会将给定元素添加为给定数组中的最后一个元素，可能更多是您要查找的内容。

由于您同时需要data-id和元素html，因此请执行arr.push( [lid, lval] )

创建多维数组

＆＃13;

var arr = new Array();

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr.push( [lid, lval] );
});

$('p').html('array length = ' + arr.length + ' & index of list 1 is ' + getIndexOfK(arr, 'l1'));


// access values like 
for(var i = 0; i < arr.length; i++){
  
  $('#myDiv').append( 'this element\'s data-id= '+ arr[i][0] +'------ this element\'s html= ' + arr[i][1]+'<br>' );
}






// function to get index of given element in a multidemensional array
// you may not actually need this, it was jsut to get your idex 
// credit: http://stackoverflow.com/questions/16102263/to-find-index-of-multidimensional-array-in-javascript
function getIndexOfK(arr, k){
    for(var i=0; i<arr.length; i++){
        var index = arr[i].indexOf(k);
        if (index > -1){
            return [i, index];
        }
    }
    return -1;
}

＆＃13;

#myDiv{
  margin-top:50px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="list">
    <li data-id="l1">list 1</li>
    <li data-id="l2">list 2</li>
    <li data-id="l3">list 3</li>
    <li data-id="l4">list 4</li>
</ul>
<p></p>

<div id="myDiv"></div>

＆＃13;

Answer 2

您正在使用新数组作为对象。在Javascript数组中只有数字索引。循环结束后，你基本上就有了一个对象。这就是长度返回0的原因。

将您的代码更改为：

var arr = new Array();

var counter = 0;

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr[lid] = lval;
    counter++;
});

$('p').html('array length = ' + counter + ' & index of list 1 is l1');

你知道我的意思。索引已经是＆＃39; l1＆＃39;，没有数字部分。

编辑：

以下是已更改代码的JSFiddle。你认为你会得到这样的东西：

 ['list 1','list 2','list 3','list 4']

但你真的得到这样的东西：

{ ＆＃39; l1＆＃39;：＆＃39;列表1＆＃39;，＆＃39; l2＆＃39;：＆＃39; list 2＆＃39;，＆＃39; l3＆＃39;：＆＃39;列表3＆＃39;，＆＃39; l4＆＃39;：＆＃39;列表4＆＃39; }

Answer 3

试试这个

使用push您可以向Array添加元素，并在indexOf中将lid传递给数组

var arr = new Array();

$('.list li').each(function(){
    var lid = $(this).attr('data-id');
    var lval = $(this).html();
    arr.push(lid);
});

$('p').html('array length = ' + arr.length + 
' & index of list 1 is ' + arr.indexOf('l1'));

JS Fiddle http://jsfiddle.net/0vfgnoav/

Answer 4

试试这个

var arr = new array();

var counter =0;
$('.list li').each(function(){
    var dataid= $(this).attr('data-id');
    var getvalue = $(this).html();
    arr[dataid] = getvalue ;
    counter++;
});

$('p').html('array length = ' + counter + ' & index of list 1 is l1');

Answer 5

您可以尝试此jsFiddle

   var arr = new Array();
   var i = 0;
   $('.list li').each(function(){
      var lid = $(this).attr('data-id');
      var lval = $(this).html();
      arr[i] = lval;
      i++;
   });

  $('p').html('array length = ' + arr.length + ' & index of list 1 is ' + arr.indexOf('list 1'));

Answer 6

尝试使用此代码。

var arr ={};

$('.list li').each(function(){    
    arr[$(this).attr('data-id')]=$(this).html();
});

function find(ar, val){
var i=0;
$.each(ar, function (key, data) {
      if(data==val)
      {
         return false;
      }
    i++;
});
    return i;
};
$('p').html('array length = ' + Object.keys(arr).length  + ' & index of list 1 is '+find(arr, "list 2"));

在对象数组中找到对象的索引

6 个答案: