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

Question

主要想法是：我在div 中有一个beverage 的列表，如果饮料是out of stock or not，我想check 和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

for 循环初始化中硬编码的7 看起来不太好。您可以通过document.querySelectorAll 找到所有饮料，然后通过检查每个饮料的跨度来找到要点击的饮料。

ES6 单行：

[...document.querySelectorAll('.ob-menu-item__title')]
  .find( drink => !drink.querySelector('.ob-menu-item__out-of-stock') )
  .click()

它的作用是：将querySelectorAll结果转换为一个数组，然后使用Array.prototype.find方法返回第一个满足回调的元素，如果给定元素没有，则在这种情况下回调返回true t 包含“缺货”范围。

更多“经典”JS：

var firstInStock = Array.from(document.querySelectorAll('.ob-menu-item__title'))
  .find( function(drink){
    if( drink.querySelector('.ob-menu-item__out-of-stock') ){
      return false;
    }
    return true;
  });
firstInStock.click()

或者如果你真的想要一个 for 循环：

var drinks = document.querySelectorAll('.ob-menu-item__title');
for(var i=0; i< drinks.length; i++){
   if( !drink.querySelector('.ob-menu-item__out-of-stock') ){
     drink.click();
     break;
   }
}

Answer 2

如下替换您的if 条件，它将按预期工作。它会在drinks 中找到elements，它的类为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]。

要在selected 元素中查找elements，您可以使用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>

Answer 3

for (var i = 0; i < 7; i++) {
    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 4

您可以使用childElementCount 来查找有多少项目。见https://www.w3schools.com/jsref/prop_element_childelementcount.asp