通过使用 Javascript 搜索元素 href 添加内容

Question

我有一个男士和女士产品列表，在每个产品下方使用 Javascript，我想打印一条消息，告诉用户这些产品有任何尺寸的库存。为了确定哪些产品是男性和女性，我正在查看 href 并定位“womensclothing”和“mensclothing”，它们有效，但是当我去打印消息时，它们并没有正确地位于产品下方，正如你看到的那样运行代码。对此的任何帮助将不胜感激。

请注意，我无权访问 html 进行更改。

var womensClothing = document.querySelectorAll('.productTitle[href*="womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productPrice');
womensClothing.forEach(function(link, i) {
  womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});


var mensClothing = document.querySelectorAll('.productTitle[href*="mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productPrice');
mensClothing.forEach(function(links, el) {
  menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});

.productWrapper {
  margin: 0 0 10px;
  border: 1px solid black;
}

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>

Answer 1

由于所有产品的价格类别都相同：productPrice，因此您需要使用 CSS Sibling 运算符 ~ 来选择与特定 <a> 元素同级的元素。

var womensClothing = document.querySelectorAll('.productTitle[href*="/womensclothing"]');
var womenSizeLocation = document.querySelectorAll('.productTitle[href*="/womensclothing"] ~ .productPrice');
womensClothing.forEach(function(link, i) {
  womenSizeLocation[i].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + link.getAttribute('href') + "><p>Women's sizes:xs, s, m, l</p></a>");
});


var mensClothing = document.querySelectorAll('.productTitle[href*="/mensclothing"]');
var menSizeLocation = document.querySelectorAll('.productTitle[href*="/mensclothing"] ~ .productPrice');
mensClothing.forEach(function(links, el) {
  menSizeLocation[el].insertAdjacentHTML("afterend", "<a class='sizeAvailability' href=" + links.getAttribute('href') + "><p>Men's Sizes: s, m, l, xl </p></a>");
});

.productWrapper {
  margin: 0 0 10px;
  border: 1px solid black;
}

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/mensclothing/">Mens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>

<div class="productWrapper">
  <a class="productTitle" href="/womensclothing/">Womens Product</a>
  <div class="productPrice">€35,00</div>
</div>