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

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 的新人，我不知道我是否有语法错误。请查看此 fiddle

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: 
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 中，数组只有数字索引。循环完成后，您基本上有一个 object.That 的原因长度 returns 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':'list 1', 'l2':'list 2', 'l3':'list 3', 'l4':'list 4' }

Answer 3

试试这个

使用 push 您可以将元素添加到数组，在 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"));

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

find index of object inside array of objects

javascript

arrays

jquery

loops