如何使用 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&nbsp;ob-menu-item__out-of-stock。if&nbsp;(drink.getElementsByClassName("ob-menu-item__out-of-stock").length&nbsp;>&nbsp;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&nbsp;ifwithdrink.querySelectorAll(".ob-menu-item__out-of-stock").lengthfor (var i = 0; i < 7; i++) {&nbsp; &nbsp; // iterating over each drink.&nbsp; &nbsp; var drink = document.querySelectorAll(".ob-menu-item__title")[i];&nbsp; &nbsp; if (drink.querySelectorAll(".ob-menu-item__out-of-stock").length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; // There's out of stock text&nbsp; &nbsp; &nbsp; &nbsp; // Do nothing and go to the next drink&nbsp;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; //The product is available. Clik the drink and exit the loop&nbsp; &nbsp; &nbsp; &nbsp; drink.click();&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }}在下面尝试。// get all drinkvar drinks = document.querySelectorAll(".ob-menu-item__title");// iterating over each drink.for (var i = 0; i < drinks.length; i++) {&nbsp; let drink = drinks[i];&nbsp; if (drink.querySelectorAll(".ob-menu-item__out-of-stock").length > 0) {&nbsp; console.log('out of stock. i = ' + i);&nbsp; &nbsp; // There's out of stock text&nbsp; &nbsp; // Do nothing and go to the next drink&nbsp;&nbsp; } else {&nbsp; &nbsp; //The product is available. Clik the drink and exit the loop&nbsp; &nbsp; console.log('In stock. i = ' + i);&nbsp; &nbsp; drink.click();&nbsp; &nbsp; break;&nbsp; }}<div class='ob-menu-items__items'>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item0<span class='ob-menu-item__out-of-stock'> - Out of stock</span>&nbsp; </h4>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item4<span class='ob-menu-item__out-of-stock'> - Out of stock</span>&nbsp; </h4>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item2<span class='ob-menu-item__out-of-stock'> - Out of stock</span>&nbsp; </h4>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item3&nbsp; </h4>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item4&nbsp; </h4>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item5&nbsp; </h4>&nbsp; <h4 class='ob-menu-item__title'>&nbsp; &nbsp; item6&nbsp; </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')]&nbsp; .find( drink => !drink.querySelector('.ob-menu-item__out-of-stock') )&nbsp; .click()它所做的是：将querySelectorAll结果转换为数组，然后使用Array.prototype.findtrue方法返回满足回调的第一个元素，如果给定元素不包含“缺货”，则回调在这种情况下返回“ 跨度。更多“经典”JS：var firstInStock = Array.from(document.querySelectorAll('.ob-menu-item__title'))&nbsp; .find( function(drink){&nbsp; &nbsp; if( drink.querySelector('.ob-menu-item__out-of-stock') ){&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; return true;&nbsp; });firstInStock.click()或者如果你真的想要一个 for 循环：var drinks = document.querySelectorAll('.ob-menu-item__title');for(var i=0; i< drinks.length; i++){&nbsp; &nbsp;if( !drink.querySelector('.ob-menu-item__out-of-stock') ){&nbsp; &nbsp; &nbsp;drink.click();&nbsp; &nbsp; &nbsp;break;&nbsp; &nbsp;}}

Answer 4

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