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 Photo =〜/ products / product1.jpg ProductCode = 001 -------- ProductID = 2 ProductName = product2 Photo =〜/ products / product1.jpg ProductCode = 002 -------- ProductID = 3 ProductName = product3 Photo =〜/ products / product1.jpg ProductCode = 003 -------- ProductID = 4 ProductName = product4 Photo =〜/ products / product2.jpg ProductCode = 004

Answer 1

我希望以下是您正在寻找的。我正在做的是我将每个步骤elements添加到body，以便我可以确定身体中是否存在具有相同image的特定url，如果是，则不要渲染它并呈现您需要的内容 查看更多类似的产品 。暂时我刚刚显示alert说 图像存在 。您可以在该部分编写显示 查看类似产品 的逻辑!!

<强> FIDDLE DEMO HERE

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

<强> DEMO

在if内，而不是警告我写了console.log，其中显示的parent包含image

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

合并来自$ .each响应的行

1 个答案: