当存在多个具有相同 class 名称和属性名称的元素时，获取元素的特定文本值

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>

我有多个具有相同 class 和 'itemprop' 属性的 div，我需要能够创建一个函数来 return 数量（在上面的示例中是 '5')

这里的问题是您在上面看到的结构在其他页面中发生了变化。在上面的例子中，Condition 和 Color 显示，但在其他页面上不显示，这意味着除了 class 名称和 '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>

如何将数量输入 JavaScript 函数并将值 return 设为 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

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

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>

当存在多个具有相同 class 名称和属性名称的元素时，获取元素的特定文本值

Get a specific text value of an element when there is multiple elements with the same class names and attribute names

javascript

if-statement

return

function

getelementsbyclassname