我有如下的html格式。我试图获得Div,但只有该div有一个带有特定文本的 child 时,我才能获得foo ='bar'属性。

   var loop = document.querySelectorAll('[foo="bar"]');
        for(var i = 0; i <= loop.length; i++)
       //perform action

<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> barfoo </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>

在上面的示例html中,我想获取第一个和第三个div,其中foo = bar并忽略第二个div,因为它没有带有foobar文本的子范围。

我上面的javascript将获取所有3个,但是在我的循环中如何在执行操作之前检查子范围文本是否与foobar匹配?

谢谢

最佳答案

var loop = document.querySelectorAll('[foo="bar"]');
loop.forEach((element, index)=>{
  if(element.innerText.match(/foobar/)){
    //Do something with element
  }
})
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> barfoo </span>
    </span>
  </div>
</div>
<div foo='bar'>
  <div>
    <span>
      <span> foobar </span>
    </span>
  </div>
</div>

10-05 20:41
查看更多