在對象數組中查找對象的索引

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"));