我想总结我的HTML代码并使用Javascript制作组件。我的HTML代码包含我将它们放在<li>标记中的图片列表。每张图片都有一个特殊的链接，并在<div>标签中添加了一个数字。如何制作通过javascript生成图片的模式？
[此外，我想按照从高到低的顺序对这些图片进行排序，但我不知道该怎么做。总的来说，用这种方式总结HTML代码是否正确？
<ul class="product-list">
<li class="product-item">
<a id="producItem1" href="page2.htm">
<img class="clothes" src="dress1.jpg">
</a>
<div class="price-holder">
<p id="price1">250,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem2">
<img class="clothes" src="coat1.jpg">
</a>
<div class="price-holder">
<p id="price2">350,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem3">
<img class="clothes" src="shirt1.jpg">
</a>
<div class="price-holder">
<p id="price3">150,000</p>
</div>
</li>
<li class="product-item">
<a id="producItem4">
<img class="clothes" src="skirt1.jpg">
</a>
<div class="price-holder">
<p id="price4">200,000</p>
</div>
</li>
</ul>
$(document).ready(function(){
imgz=['dress1.jpg', 'coat1.jpg', 'shirt1.jpg', 'skirt1.jpg','dress2.jpg'];
prices=[100000, 200000, 150000, 250000, 300000];
linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
imgz.map((z,i)=> $('body').append(`
<li class="product-item">
<a id="producItem${i+1}">
<img class="clothes" src="${imgz[i]}">
</a>
<div class="price-holder">
<p id="price${i+1}">${prices[i]}</p>
</div>
</li>`));
});<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script></head>
<body><ul class="product-list"></ul></body></html>并且如果您要自动创建链接数据，请使用此for(i in imgz){linkz[i]='page'+(i+1)+'.htm';}而不是linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];