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

Question

主要思想是：我有一份清单，beverage如果饮料是，并且有库存div，我想知道。它需要在JavaScript 中（没有 JQuery）checkout of stock or notclickfirst drink available

元素在这里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有 class ob-menu-item__out-of-stock。

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

---

请参考这个说不.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.querySelectorAllwhich is done inside ifwithdrink.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 循环初始化中的硬编码7看起来不太好。你可以找到所有的饮料，document.querySelectorAll然后通过检查每一种饮料的跨度来找到要点击的饮料。

ES6单行：

[...document.querySelectorAll('.ob-menu-item__title')]

  .find( drink => !drink.querySelector('.ob-menu-item__out-of-stock') )

  .click()

它所做的是：将querySelectorAll结果转换为数组，然后使用Array.prototype.findtrue方法返回满足回调的第一个元素，如果给定元素不包含“缺货”，则回调在这种情况下返回“ 跨度。

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

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;

    }

}