javascript - 如何使用 JavaScript 检查另一个元素中是否有一个元素

Question

主要思想是:我有一个列表 beverage在 div我想check如果饮料是 out of stock or not , 和 click first drink available有存货。它需要在 JavaScript(无 JQuery)
元素在此hierarchy :Main div包含所有饮料:class="ob-menu-items__items"Each drink将在 H4 class="ob-menu-item__title"如果产品是out of stock会有span class="ob-menu-item__out-of-stock"与 text " - Out of Stock"到目前为止，我尝试了这个(并被卡住了):

for (var i = 0; i < 7; i++) {
    // iterating over each drink.
    var drink = document.getElementsByClassName("ob-menu-item__title")[i];
    if (document.getElementsByClassName(".ob-menu-item__out-of-stock").parents(drink).length == 1) {
        // There's out of stock text
        // Do nothing and go to the next drink 
    } else {
        //The product is available. Clik the drink and exit the loop
        document.getElementsByClassName("ob-menu-item__title")[i].click();
        break;
    }
} 

谢谢!

Answer 1

更换您的 if条件如下，它将按预期工作。它将找到 elements里面 drinks有类 ob-menu-item__out-of-stock .

if (drink.getElementsByClassName("ob-menu-item__out-of-stock").length > 0)

请引用 this answer which says .getElementsByClassName("home")[0] 不应该使用。您也可以使用 .querySelectorAll() 如下所示。替换 getElementsByClassName与 querySelectorAll并通过 class name与 class selector (.) .所以 document.getElementsByClassName("ob-menu-item__title")[i]将替换为 document.querySelectorAll(".ob-menu-item__title")[i] .
寻找 elements里面 selected您可以使用的元素 element.querySelectorAll这是在 if 内完成的与 drink.querySelectorAll(".ob-menu-item__out-of-stock").length

for (var i = 0; i < 7; i++) {
    // iterating over each drink.
    var drink = document.querySelectorAll(".ob-menu-item__title")[i];
    if (drink.querySelectorAll(".ob-menu-item__out-of-stock").length > 0) {
        // There's out of stock text
        // Do nothing and go to the next drink 
    } else {
        //The product is available. Clik the drink and exit the loop
        drink.click();
        break;
    }
}

在下面试试。

// get all drink
var drinks = document.querySelectorAll(".ob-menu-item__title");
// iterating over each drink.
for (var i = 0; i < drinks.length; i++) {
  let drink = drinks[i];

  if (drink.querySelectorAll(".ob-menu-item__out-of-stock").length > 0) {
  console.log('out of stock. i = ' + i);
    // There's out of stock text
    // Do nothing and go to the next drink 
  } else {
    //The product is available. Clik the drink and exit the loop
    console.log('In stock. i = ' + i);
    drink.click();
    break;
  }
}

<div class='ob-menu-items__items'>
  <h4 class='ob-menu-item__title'>
    item0<span class='ob-menu-item__out-of-stock'> - Out of stock</span>
  </h4>
  <h4 class='ob-menu-item__title'>
    item4<span class='ob-menu-item__out-of-stock'> - Out of stock</span>
  </h4>
  <h4 class='ob-menu-item__title'>
    item2<span class='ob-menu-item__out-of-stock'> - Out of stock</span>
  </h4>
  <h4 class='ob-menu-item__title'>
    item3
  </h4>
  <h4 class='ob-menu-item__title'>
    item4
  </h4>
  <h4 class='ob-menu-item__title'>
    item5
  </h4>
  <h4 class='ob-menu-item__title'>
    item6
  </h4>
</div>