Выберите элемент родственный дом на основе текстового содержимого одного из собрата

Question

я следующий HTML структура -

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

Теперь я хочу, чтобы выбрать все такие пядь которые имеют номер телефона используя чистый Javascript или CSS селектор. Я использую рентген. Я пробовал это, но это, похоже, не работает.

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

Answer 1

Вы можете получить все span элементов и петлю, чтобы найти следующий span после тех, которые содержат Phone Number:

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')