合並$ .each響應中的行

Question

我正在使用以下代碼來展示來自ajax響應的產品。 我的問題是表格中有許多具有相同圖像的產品。 所以我想找到所有具有相同rec.Photo的產品。 然后，我將在一行上展示圖片，並說：“我們有類似產品的變種，請點擊圖片以查看更多……”我的問題是：a）如何找到帶有同一張圖片的所有產品b）如何找到連續顯示“查看更多類似產品……”而不會破壞循環

  $.each(response, function (i, rec) {
                                 if (i > 0) {

                                     strproductlist += '<div class="gridItem listView">';
                                     strproductlist += ' <div class="gridItemContent">';
                                     strproductlist += '<div class="productPhoto">';
                                     strproductlist += '<a title="' + rec.ProductName + '"  href="ProductDetails.aspx?productid=' +
 rec.ProductID + '">';
                                     strproductlist += '<img alt="' + rec.ProductName + '" src="' + rec.Photo + '">';
                                     strproductlist += '</a>';
                                     strproductlist += '</div>';
                                     strproductlist += '<div class="listViewProductDet">';
                                     strproductlist += '<h2>';
                                     strproductlist += '<a title="" href="ProductDetails.aspx?productid=' + rec.ProductID + '">' +
 rec.ProductName + '</a>';
                                     strproductlist += '</h2>';
                                     strproductlist += '<p class="productCode">' + rec.ProductCode + '</p>';
                                     strproductlist += '<ul class="fieldlist">';

    strproductlist += '</div>';
                                     strproductlist += '</div>';
                                     strproductlist += '</div>';
                                 }

//編輯我正在編寫四個示例記錄，這些示例記錄顯示具有相同圖像的3個記錄

-------- ProductID = 1 ProductName = product1圖片=〜/ products / product1.jpg ProductCode = 001 -------- ProductID = 2 ProductName = product2圖片=〜/ products / product1.jpg ProductCode = 002 -------- ProductID = 3 ProductName = product3圖片=〜/ products / product1.jpg ProductCode = 003 -------- ProductID = 4 ProductName = product4圖片=〜/ products / product2。 jpg ProductCode = 004

Answer 1

我希望下面是您要尋找的。 我正在做的是在每個步驟中將elements附加到body ，以便我可以識別主體中是否存在具有相同url的特定image ，如果是，則不要渲染它並呈現您想要查看的類似產品 。 我暫時只顯示一條alert說存在圖像 。 您可以編寫在該部分中顯示視圖相似產品的邏輯！

這里的演示

 var data=[ {"ProductID":"1","ProductName":"product1", "Photo":"https://www.runtastic.com/shop/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/o/r/orbit_with_clip_en_1.png","ProductCode":"001"}, {"ProductID":"2","ProductName":"product2", "Photo":"https://truegamers.com.my/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/3/_/3_83_6.jpg","ProductCode":"002"}, {"ProductID":"3","ProductName":"product3", "Photo":"https://www.runtastic.com/shop/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/o/r/orbit_with_clip_en_1.png","ProductCode":"003"}, {"ProductID":"4","ProductName":"product4", "Photo":"https://truegamers.com.my/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/3/_/3_83_6.jpg","ProductCode":"004"} ]; $.each(data, function (i, rec) { var strproductlist=""; var imgname=rec.Photo; if($('.gridItem img[src="'+imgname+'"]').length) { alert('image present'); } else { strproductlist += '<div class="gridItem listView">'; strproductlist += '<div class="gridItemContent">'; strproductlist += '<div class="productPhoto">'; strproductlist += '<a title="' + rec.ProductName + '" href="ProductDetails.aspx?productid=' + rec.ProductID + '">'; strproductlist += '<img alt="' + rec.ProductName + '" src="' + rec.Photo + '">'; strproductlist += '</a>'; strproductlist += '</div>'; strproductlist += '<div class="listViewProductDet">'; strproductlist += '<h2>'; strproductlist += '<a title="" href="ProductDetails.aspx?productid=' + rec.ProductID + '">' + rec.ProductName + '</a>'; strproductlist += '</h2>'; strproductlist += '<p class="productCode">' + rec.ProductCode + '</p>'; strproductlist += '<ul class="fieldlist">'; strproductlist += '</div>'; strproductlist += '</div>'; strproductlist += '</div>'; $('body').append(strproductlist) } }); 

 img{ width:100px; height:100px; } .gridItem{ float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

---

更新

演示

在if而不是警報中，我編寫了console.log ，其中顯示了包含該image的parent

if($('.gridItem img[src="'+imgname+'"]').length)
{
       console.log($('.gridItem img[src="'+imgname+'"]').closest('.gridItem'));
}