如何使用 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;
   }
}