使用href獲取父div

Question

是否可以僅使用href查找父div？

我基本上具有以下功能：

var hrefs = [];
[].forEach.call(document.querySelectorAll("area"), function (value, index, array) {
    hrefs.push(value.getAttribute("href"));
});

for (var i = 0; i < hrefs.length; i++) {
    console.log(hrefs[i]);
    }

查找屬於html區域的所有href。 我試圖找到這些href的父元素，以便可以將新的div附加到該父元素。 如果這不可能，那么我需要什么屬性才能定位該屬性的父div。

Answer 1

您想要這樣的東西嗎？：

var hrefs = document.querySelectorAll("area");

for (var i = 0; i < hrefs.length; i++) {
    console.log(hrefs[i].getAttribute('href'));
    console.log(hrefs[i].parentNode);
}

Answer 2

首先創建一個具有所有這些元素的對象：

var hrefs = {};

Array.prototype.forEach.call(document.querySelectorAll("area[href]"), function (element) {
    hrefs[ element.getAttribute("href") ] = element;
});

然后，您可以使用.parentNode到達其父.parentNode ：

for ( var i in hrefs ) {
    console.log( i, hrefs[i].parentNode );
}

---

因此，如果您以后想要將元素添加到http://www.google.com的父級，則可以執行以下操作：

hrefs['http://www.google.com'].parentNode.appendChild( element );

Answer 3

我不明白為什么你不只是：

[].forEach.call(document.querySelectorAll("area"), function(area) {
    area.parentNode.appendChild(
        document.createElement("div")
    );
});

Answer 4

策略是獲取所有區域元素，然后匹配其href值。 以下內容返回第一個匹配的area元素：

function getAreaByHref(href) {
  var areas = document.getElementsByTagName('area');
  for (var i = 0, iLen=areas.length; i<iLen; i++) {
    if (areas[i].href == href) {
      return areas[i].parentNode;
    }
  }
}

如果您認為會有不止一個，請讓該函數構建一個匹配元素的數組並將其返回。

Answer 5

如果使用jQuery，則可以使用.parent（）方法來完成此操作。