Wählen Geschwister dom Element auf dem Textinhalt eines der Geschwister basiert

Question

Ich habe HTML-Struktur folgende -

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

Jetzt möchte ich alle solche Spanne auszuwählen, die Telefonnummer mit reinen Javascript oder CSS haben Wähler. Ich verwende x-ray. Ich hatte das versucht, aber das scheint nicht zu funktionieren.

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

Answer 1

können Sie erhalten alle span Elemente und Schleife zum nächsten span nach solchen mit Phone Number zu finden:

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>

Ich bin mir nicht sicher, es ist eine CSS-Selektor-basierte Lösung (:contain ist ein jquery Pseudo Selektor). Aber hier ist ein anderer Ansatz 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

Wenn Sie fein sind mit jQuery, dann, hier ist die Antwort:

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

oder diese

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