Select sibling dom 元素基于其中一个兄弟的文本内容

Question

我有以下 html 结构 -

<p>
    <span class="font-weight-medium">
            Phone Number:
    </span>
   <br>
   <span>(123) 456-7869</span>
</p>

现在我想 select 所有这样 span 有 phone number 使用纯 javascript 或 css select 或。我正在使用 x 射线。我已经试过了，但这似乎不起作用。

  x(html,'span[contains(text(),"Phone Number")]')
  (function(err, obj) {
      console.log(obj);
  });

Answer 1

您可以获得所有 span 元素并在包含 Phone Number:

的元素之后循环查找下一个 span

span_tags = document.getElementsByTagName('span');
for (var i=0, max=span_tags.length; i < max; i++) {
  el =  span_tags[i];
  str = el.innerHTML;
  regex = / *Phone Number: */;
  if ( str.match(regex)) {
    console.log(span_tags[i+1].innerHTML);
  }
}

<p>
  <span class="font-weight-medium">
Phone Number:
  </span>
  <span>(123) 456-7869</span>
</p>

我不确定是否存在基于 css 选择器的解决方案（:contain 是一个 jquery 伪选择器）。但这是另一种使用 indexOf:

的方法

span_tags = document.getElementsByTagName('span');
for (var i=0, max=span_tags.length; i < max; i++) {
  if (span_tags[i].innerHTML.indexOf("Phone Number:") != -1) {
   console.log(span_tags[i+1].innerHTML);
  }
}

<p>
  <span class="font-weight-medium">
Phone Number:
  </span>
  <span>(123) 456-7869</span>
</p>

Answer 2

如果您使用 jQuery 没问题，那么，答案如下：

$("span:contains(Phone Number:)~span")

或这个

$('span:contains(Phone Number:)').siblings('span')

Select sibling dom 元素基于其中一个兄弟的文本内容

Select sibling dom element based on the text content of one of sibling

html

javascript

css

x-ray