javascript - 使用 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>