Question

我有以下HTML我试图使用jQuery的.each（）方法循环：

<div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">

<div class="vehiclesInBox" id="product3">
    <div class="fltLeft numAmt3">
        <span id="builtVehNum" class="hidden"><span>X</span></span>
    </div>
     <div class="fltLeft positionRelative name3">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
        <img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
        <img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
     </div>
     <div class="fltRight recycle hidden" id="removeHidden3">:)</div>
     <div class="fltRight removeX">–</div>
     <div class="clear"></div>
 </div>

<div class="vehiclesInBox" id="product4">
    <div class="fltLeft numAmt4">
        <span id="builtVehNum" class="hidden"><span>X</span></span>
    </div>
    <div class="fltLeft positionRelative name4">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
        <img class="pattern patternInShipment" src="../images/fire1192015.png">
        <img class="vehicle vehicleInShipment" src="../images/truck1192015.png" style="">
     </div>
     <div class="fltRight recycle hidden" id="removeHidden4">:)</div>
     <div class="fltRight removeX">–</div>
     <div class="clear"></div>
 </div>

<div class="vehiclesInBox" id="product5">
    <div class="fltLeft numAmt5"><span id="builtVehNum" class="hidden"><span>X</span></span>
    </div>
    <div class="fltLeft positionRelative name5">
        <img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
        <img class="pattern patternInShipment" src="../images/squiggle1192015.png">
        <img class="vehicle vehicleInShipment" src="../images/van1192015.png" style="">
    </div>
    <div class="fltRight recycle hidden" id="removeHidden5">:)</div>
    <div class="fltRight removeX">–</div>
    <div class="clear"></div>
 </div>

<div class="vehiclesInBox" id="product6">
    <div class="fltLeft numAmt6"><span id="builtVehNum" class="hidden"><span>X</span></span>
</div>
<div class="fltLeft positionRelative name6">
    <img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
    <img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
    <img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
</div>
    <div class="fltRight recycle hidden" id="removeHidden6">:)</div>
    <div class="fltRight removeX">–</div>
    <div class="clear"></div>
</div>

我正在尝试使用.vehiclesInBox类查看所有div容器，并比较其中的图像源。如果所有三个图像都完全匹配，请删除最新的重复div＃product（x），并在span＃builtVehNum中的匹配容器中添加一个数字计数器。我的jQuery如下：

 $("#currentOrder .vehiclesInBox").each(function() {
        var jaVehicle = $(this).find("img.vehicleInShipment").attr("src")
        var jaWheel = $(this).find("img.wheelsInShipment").attr("src")
        var jaPattern = $(this).find("img.patternInShipment").attr("src")

        });

我对下一步会是什么感到困惑？任何帮助表示赞赏。谢谢！

Answer 1

它尚未添加计数器，但在这里你有一个粗略的选择逻辑：

$("#currentOrder .vehiclesInBox").each(function() {
  var cont = $(this),
    images = cont.find('img'),
    srcs = new Array(images.eq(0).attr('src'), images.eq(1).attr('src'), images.eq(2).attr('src')),
    matchings = $("#currentOrder .vehiclesInBox").filter(function() {
        return $(this).find('img[src="' + srcs[0] + '"]').length && $(this).find('img[src="' + srcs[1] + '"]').length && $(this).find('img[src="' + srcs[2] + '"]').length;
    });

    if (matchings.length > 1) {
        matchings.filter(':last').fadeTo(500, .5);
    }

});

将fadeTo(500, .5);替换为remove();。

Working fiddle

Answer 2

我会这样处理：

遍历每个产品，然后为每个产品循环遍历其图像。
在循环中，您将创建一个数组来跟踪所有图像源。每次遇到新图像时，请检查其源是否已存在于阵列中。如果没有，请添加它。如果是，请在我们的duplicateCounter中添加一个。
最后，检查duplicateCounter是否等于3（换句话说，你有三个匹配的图像源）。
如果是，请删除当前产品

请参阅下面的代码（运行以查看其中的操作）：

function removeDuplicates() {

  var imgSources = []; // empty array to hold image sources for comparison
  var duplicateCounter; // counter to keep track of how many duplicate image sources found
  var src;

  // Loop over each product
  $("#currentOrder .vehiclesInBox").each(function() {

    // Reset the duplicate counter to zero for each new product
    duplicateCounter = 0;

    // Loop over the current product's images
    $(this).find('img').each(function() {

      src = $(this).attr('src');

      // Check if the current image source exists in the image source array. 
      // If it does, increment the counter by one.
      if ($.inArray(src, imgSources) > -1) {
        duplicateCounter++;
      } else {
        // If it doesn't already exist in the array, add it
        imgSources.push(src);
      }

    });

    // Now that we've looped through all the images for the current product, check if the duplicate count is 3. If so, remove the product.
    if (duplicateCounter === 3) {
      $(this).remove();
    }

  });

}

$(document).ready(function() {
  // Call the function on document ready
  removeDuplicates();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div id="currentOrder" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 79px; max-height: none; height: auto;">

    <div class="vehiclesInBox" id="product3">
      <div>Product 3</div>

      <img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
      <img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
      <img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
    </div>

    <div class="vehiclesInBox" id="product4">
      <div>Product 4</div>
      <img class="wheelThmbs wheelsInShipment" src="../images/wheels2.png">
      <img class="pattern patternInShipment" src="../images/fire1192015.png">
      <img class="vehicle vehicleInShipment" src="../images/truck1192015.png" style="">
    </div>

    <div class="vehiclesInBox" id="product5">
      <div>Product 5</div>
      <img class="wheelThmbs wheelsInShipment" src="../images/wheels3.png">
      <img class="pattern patternInShipment" src="../images/squiggle1192015.png">
      <img class="vehicle vehicleInShipment" src="../images/van1192015.png" style="">
    </div>

    <div class="vehiclesInBox" id="product6">
      <div>Product 6 (this one has duplicate images and will be removed...)</div>
      <img class="wheelThmbs wheelsInShipment" src="../images/wheels1.png">
      <img class="pattern patternInShipment" src="../images/checkerboard1192015.png">
      <img class="vehicle vehicleInShipment" src="../images/car1192015.png" style="">
    </div>

</body>

</html>

在多个div中寻找重复的图像

2 个答案: