Jquery массив отображается неправильно

Question

у меня есть меню и в меню выберите Я хочу, чтобы фильтровать мой DIV по моим данным меню значение атрибута Вот образец моего кода

<li class="menu" data-cat="flower"> 
<li class="menu" data-cat="car"> 



<div class="item" data-item="lily"></div> 
<div class="item" data-item="Audy"></div> 
<div class="item" data-item="BMW"></div> 
<div class="item" data-item="sunflower"></div> 

JQuery:

$('.menu').on("click",function(e){ 
    var menu=$(this).attr("data-cat"); 
    /* 
    console.log(menu) ; // displaying car 
    var items=$('.item'); 
    for(var i; i<items.length;i++) { 
     console.log(items[i].attr('data-items')) 
     /* 
     console.log(items[i].length) ----- > length not define 
     console.log(items[i].data('item') ----- > data is not a function 
     */ 
    } 

на console.log(items[i]) будет отображать <div class="item" data-item="BMW"></div>

Answer 1

В цикл, items[i] простой JavaScript Object, что вам нужно сделать для того, чтобы использовать data() функцию, то вам нужно преобразовать его в объект JQuery как этот $(items[i]).

$('.menu').on("click",function(e){ 
    var menu = $(this).attr("data-flower"); 
    var items = $('.item'); 
    for(var i; i < items.length; i++) { 
     console.log($(items[i]).data('item')); 
    } 
});