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

Question

我有一个从HTML的项目列表生成的对象数组，在处理该数组以获取项目的索引和数组的长度时始终遇到一个问题，始终为零。

我想要数据ID和值（列表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的新手，我不知道语法是否有错误。 请查看这个小提琴

Answer 1

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

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

由于您同时需要data-id和元素的html ，因此可以通过执行arr.push( [lid, lval] )创建多维数组

 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; } 

 #myDiv{ margin-top:50px; } 

 <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> 

Answer 2

您正在使用新数组作为对象。 在Javascript数组中，只有数字索引。 循环完成后，基本上就有了一个对象，这就是为什么length返回0的原因。

将您的代码更改为：

var arr = new Array();

var计数器= 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');

而且您会明白我的意思。 索引已经是“ l1”，没有数字部分。

编辑：

这是更改后的代码的JSFiddle 。 您认为您得到了这样的东西：

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

但实际上您得到的是这样的：

{'l1'：'列表1'，'l2'：'列表2'，'l3'：'列表3'，'l4'：'列表4'}

Answer 3

尝试这个

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

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小提琴 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"));