So, there is a section of code that creates a list from an array:

var cartArray = shoppingCart.listCart(); var output = ""; for (var i = 0; i<cartArray.length; i++) { output += "<li id='" + cartArray[i].id + "'>" + "<div class='preview' style='background-image: url(" + cartArray[i].img + ")'></div>" + "<a href='javascript:void(0)' class='delete-item far fa-times-circle' data-name='" + cartArray[i].name + "'></a>" + "</li>"; } $("#panel").html(output); $("#panel li").hover( function() { // Можно было через атрибуты извлечь как-то так // var name = $(this).attr("data-name"); // и затем поставить в нужное место кода, без участия массива for (var ..........) { panel.append( $( "<div class='item transition'><div class='title'>" + cartArray[i].name + "</div><a href='" + cartArray[i].link + "' class='link transition'>More images</a></div><div class='image' style='background-image: url(" + cartArray[i].img + ")'></div>" ) ); } }, function() { panel.find(".item").remove(); } ); 

When hovering over the generated list item, I need to output a block in which there will be data from the same array outside the previously created list. I could prescribe attributes for list items and then easily extract them and substitute where necessary, but something tells me that you can make this thing easier. By requesting the necessary data from the array by comparing by ID or order in the list.

    1 answer 1

    If I understood everything correctly, then somehow:

     $("#show-cart li").hover( function() { var id = Number($(this).attr("id")); for (var i in cartArray) { if (cartArray[i].id === id) { panel.append( $( "<div class='item transition'><div class='title'>" + cartArray[i].name + "</div><a href='" + cartArray[i].link + "' class='link transition'>More images</a><div class='image' style='background-image: url(" + cartArray[i].img + ")'></div></div>" ) ); } } }, function() { panel.find(".item").remove(); } ); 

    We take the id from the list item, compare it with the objects in the array and output the necessary data to the block.

    • Exactly what is needed. Thank. - Alexey Giryayev