找到 JavaScript 个对象的 DOM 个父容器

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>

我已经进行了一些在线搜索，但无法找到我正在尝试做的事情是否可行或者我是否应该尝试其他方法的答案。我试过 stack[i].closest('div') 和 stack[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());

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

<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>

找到 JavaScript 个对象的 DOM 个父容器

Find DOM parent container of JavaScript Object

html

javascript

jquery

object

javascript-objects