当有多个具有相同类名和属性名的元素时，获取一个元素的特定文本值

Question

<div class="my-attributes">
                <div class="row">
                    <div class="SameClass"><strong>Condition</strong></div>
                    <div class="SameClass-value" itemprop="condition">New</div>
                </div>
                <div class="row">
                    <div class="SameClass"><strong>Color</strong></div>
                    <div class="SameClass-value" itemprop="color">Black</div>
                </div>

            <div class="row">
                <div class="SameClass"><strong>Availability</strong></div>
                <div class="SameClass-value" itemprop="avail">In Stock</div>
            </div>

                <div class="row">
                    <div class="SameClass"><strong>Quantity</strong></div>
                    **<div class="SameClass-value" itemprop="qty"> 5 </div>**
                </div>

                <div class="row">
                    <div class="SameClass"><strong>Price</strong></div>
                    <div class="SameClass-value" itemprop="price">250</div>
            </div>

我有多个具有相同类和“itemprop”属性的 div，我需要能够创建一个返回数量的函数（在上面的示例中为“5”）

这里的问题是您在上面看到的结构在其他页面中发生了变化。在上面的示例中，条件和颜色显示，但在其他页面上没有出现，这意味着除了类名和“itemprop”的属性值之外，结构发生了变化。见下文：

<div class="my-attributes">
            <div class="row">
                <div class="SameClass"><strong>Availability</strong></div>
                <div class="SameClass-value" itemprop="avail">In Stock</div>
            </div>

                <div class="row">
                    <div class="SameClass"><strong>Quantity</strong></div>
                    **<div class="SameClass-value" itemprop="qty"> 5 </div>**
                </div>

                <div class="row">
                    <div class="SameClass"><strong>Price</strong></div>
                    <div class="SameClass-value" itemprop="price">250</div>
            </div>

如何将 Quantity 放入 JavaScript 函数并返回 5 的值？无需编辑网站本身的代码？

我一直在玩这个，但我确信这是完全不正确的。

function () {
  var x = document.getElementsByClassName("SameClass").getAttribute("itemprop"); 
  if (x = 'price')
  {
  var a = document.getElementsByClassName("SameClass").getAttribute("itemprop").innerText;
  return a;
  }
}

Answer 1

以下可能对您有用：

function getQty() { 
  var arr=document.getElementsByClassName("SameClass-value");
  for(var i=0;i<arr.length;i++)
   if (arr[i].getAttribute("itemprop") == 'qty') return arr[i].innerHTML;
}

或者，甚至更短，你可以这样做

function getQty() { 
  return document.getElementsByClassName("SameClass-value")
  .find(d=>d.getAttribute("itemprop") == 'qty').innerHTML;
}

抱歉重复编辑。今天对我来说是漫长的一天，我试图在我的小智能手机上快速拼凑一些东西。

Answer 2

如果类没有改变，您可以选择所有相关元素，然后从您需要的元素中获取值。

function getQty() {
  var qty;
  document.querySelectorAll("div.SameClass-value").forEach(function(element) {
    if (element.getAttribute("itemprop") === "qty") {
      qty = element.innerText;
    }
  });
  return qty;
}

console.log(getQty());

<div class="my-attributes">
  <div class="row">
    <div class="SameClass"><strong>Condition</strong></div>
    <div class="SameClass-value" itemprop="condition">New</div>
  </div>
  <div class="row">
    <div class="SameClass"><strong>Color</strong></div>
    <div class="SameClass-value" itemprop="color">Black</div>
  </div>

  <div class="row">
    <div class="SameClass"><strong>Availability</strong></div>
    <div class="SameClass-value" itemprop="avail">In Stock</div>
  </div>

  <div class="row">
    <div class="SameClass"><strong>Quantity</strong></div>
    <div class="SameClass-value" itemprop="qty"> 5 </div>
  </div>

  <div class="row">
    <div class="SameClass"><strong>Price</strong></div>
    <div class="SameClass-value" itemprop="price">250</div>
  </div>
</div>