Question

在查找已添加到JavaScript对象的图像的父容器时是否可以遍历DOM？我有以下对象和目标代码数组：

var builtVehicle = {pattern: "../images/fire1192015.png", 
vehicle: "../images/van1192015.png", 
wheel: "../images/wheels3.png"};

var createdVehicles = [
{pattern:"../images/checkerboard1192015.png",       
vehicle:"../images/car1192015.png", wheel:"../images/wheels1.png"}, 
{pattern:"../images/fire1192015.png", vehicle:"../images/truck1192015.png",     
wheel:"../images/wheels4.png"},]

我正在遍历两个元素，寻找车辆，车轮和图案属性的精确图像源匹配。如果builtVehicle对象是唯一的（意味着不同的车辆，车轮图案图像源属性比createdVehicles数组中的对象），则将其推送到数组。但是，一旦通过createdVehicles对象的循环找到匹配项，我就希望能够引用包含对象中定义的图像的div父容器。以下是我目前正在使用的功能：

builtVehicle = {
            vehicle: jaVehicle,
            wheel: jaWheel,
            pattern: jaPattern,
            }

    var matchVehicle = function (vehicle, stack) {
        for (var i = 0; i < stack.length; i++) {
         if ((vehicle.pattern === stack[i].pattern) && (vehicle.vehicle === stack[i].vehicle) && (vehicle.wheel === stack[i].wheel)) {

//find DOM div parent that the image resides in so something like 
//stack[i].closest('div'), even though that won't work    
//Add some DOM manipulations             

         return;
          }
      }
      // Push the vehicle to array if it didn't complete match
      stack.push(vehicle);
    };
    matchVehicle(builtVehicle, createdVehicles);
    });

我的HTML看起来像这样，所以我希望能够引用div.name3和div＃product3容器：

<div class="vehiclesInBox" id="product3">
  <div class="fltLeft positionRelative name3">
   <img class="wheelThmbs wheelsInShipment uniqueWheel3" src="../images/wheels1.png">
   <img class="pattern patternInShipment uniquePattern3" src="../images/fire1192015.png">
   <img class="vehicle vehicleInShipment uniqueVehicle3" src="../images/car1192015.png">
  </div>
  <div class="clear"></div>
</div>

我已经完成了一些在线搜索，但是如果我尝试做的事情是可行的，或者我应该尝试不同的方法，那么无法找到答案。我已经尝试过堆栈[i] .closest（＆＃39; div＆＃39;）和堆栈[i] .parent（），但显然这样做不起作用。提前谢谢！

Answer 1

尝试

var filtered = $.map(createdVehicles, function(v, k) {
  return $.map(builtVehicle, function(value, key) {
    return v[key] === builtVehicle[key] ? value.split("/").slice(-1) : null
  })
}); 

var res = $("img").filter(function(i, el) {
  return filtered[0] === el.src.split("/").slice(-1)[0]
});

console.log(res.parents());

＆＃13;

var builtVehicle = {pattern: "../images/fire1192015.png", 
vehicle: "../images/van1192015.png", 
wheel: "../images/wheels3.png"};

var createdVehicles = [
{pattern:"../images/checkerboard1192015.png",       
vehicle:"../images/car1192015.png", wheel:"../images/wheels1.png"}, 
{pattern:"../images/fire1192015.png", vehicle:"../images/truck1192015.png",     
wheel:"../images/wheels4.png"}];

var filtered = $.map(createdVehicles, function(v, k) {
  return $.map(builtVehicle, function(value, key) {
    return v[key] === builtVehicle[key] ? value.split("/").slice(-1) : null
  })
}); 


var res = $("img").filter(function(i, el) {
  return filtered[0] === el.src.split("/").slice(-1)[0]
})

console.log(res.parents());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="vehiclesInBox" id="product3">
  <div class="fltLeft positionRelative name3">
   <img class="wheelThmbs wheelsInShipment uniqueWheel3" src="../images/wheels1.png">
   <img class="pattern patternInShipment uniquePattern3" src="../images/fire1192015.png">
   <img class="vehicle vehicleInShipment uniqueVehicle3" src="../images/car1192015.png">
  </div>
  <div class="clear"></div>
</div>

＆＃13;

查找JavaScript Object的DOM父容器

1 个答案: