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

Question

主要思想是：我在div中有一个beverage清单，我想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条件，它将按预期工作。 它将在具有 class ob-menu-item__out-of-stock drinks中找到elements 。

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

---

请参考这个答案，其中说.getElementsByClassName("home")[0]不应使用。 您也可以使用.querySelectorAll() ，如下所示。 将getElementsByClassName替换为querySelectorAll并使用class selector (.)传递class name 。 所以document.getElementsByClassName("ob-menu-item__title")[i]将被替换为document.querySelectorAll(".ob-menu-item__title")[i] 。

要在selected元素中查找elements ，您可以使用element.querySelectorAll ，它在if with 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 2

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

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

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方法返回满足回调的第一个元素，如果给定元素不包含“out”，则在这种情况下，回调返回true库存”跨度。

更多“经典”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;
   }
}