为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕村9548890 2023-01-06 15:53:35

主要思想是:我有一份清单,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;

    }


查看完整描述

4 回答

?
温温酱

TA贡献1511条经验 获得超3个赞

如下替换您的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()像下面这样使用。替换getElementsByClassNamequerySelectorAll并传递class nameclass 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>


查看完整回答
反对 回复 2023-01-06
?
富国沪深

TA贡献1555条经验 获得超9个赞

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


查看完整回答
反对 回复 2023-01-06
?
RISEBY

TA贡献1616条经验 获得超5个赞

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;

   }

}


查看完整回答
反对 回复 2023-01-06
?
UYOU

TA贡献0条经验 获得超1个赞

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;

    }

}


查看完整回答
反对 回复 2023-01-06
  • 4 回答
  • 0 关注
  • 13 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信