时间戳

首页 > 解决方案 > 按唯一子元素查找父元素，但单击另一个子元素

javascript - 按唯一子元素查找父元素，但单击另一个子元素

问题描述

试图找到正确的 xpath 选择器。元素只有href唯一。是否可以通过href="#">iphone X文本和父类查找元素class="card h-100"。但是单击<button class="btn btn-info">哪个是父类的另一个子类。

  <div class="card h-100">
    <div class="card-body">
      <h4 class="card-title">
        <a href="#">iphone X</a>
      </h4>
    </div>
    <div class="card-footer">
     <button class="btn btn-info"></button>
    </div>
  </div>

标签： javascriptcssseleniumxpathprotractor

解决方案

尝试使用以下代码querySelectorAll()

(function() {

  var a = document.querySelectorAll('a[href="#"]');
  var result = [];
  a.forEach(function(el) {
    if (el.innerHTML == 'iphone X' && el.parentElement.parentElement.parentElement.className.includes('card h-100')) {
      result.push(el);
    }
  });

  console.log(result);
})();
<div class="card h-100">
  <div class="card-body">
    <h4 class="card-title">
      <a href="#">iphone X</a>
    </h4>
  </div>
  <div class="card-footer">
    <button class="btn btn-info"></button>
  </div>
</div>

<div class="card h-100">
  <div class="card-body">
    <h4 class="card-title">
      <a href="#">iphone XS</a>
    </h4>
  </div>
  <div class="card-footer">
    <button class="btn btn-info"></button>
  </div>
</div>

<div class="card h-200">
  <div class="card-body">
    <h4 class="card-title">
      <a href="#">iphone X</a>
    </h4>
  </div>
  <div class="card-footer">
    <button class="btn btn-info"></button>
  </div>
</div>

推荐阅读