替换同名类的内部div中的跨度文本

Question

I have a DOM element like

<div class="gm-style-cc">
    <div>
        <div></div>
        <div></div>
    </div><span>some text</span>
    <div>
        <a target="_new">Report a map error</a>
    </div>
</div>
<div class="gm-style-cc">
    <div>
        <span>5000 km</span>
    </div>
</div>

I want to replace km to miles in the second span, but I am not even able to access the particular span

For testing first I tried to change color , I have tried the following, but not getting exact values

.gm-style-cc:nth-child(1) span {  color: yellow !important; }
.gm-style-cc:nth-child(2) span {  color: green !important; }
.gm-style-cc:nth-child(3) span {  color: green !important; }

----------
span.gm-style-cc:nth-child(1) {  color: yellow !important; }

----------
.gm-style-cc:nth-of-type(1).eq(1) div span{
    color: red !important;
}

-------
.gm-style-cc span{
   color: red !important;
}

-----------
.gm-style-cc:nth-of-type(1).eq(1) div span{
    color: red !important;
}

How can I get the specific position of the span element?

Edit : as Mazz suggested

.gm-style-cc div span {
    color: red;
}

seems to show changes , but it is doing for all span , i want for span in second class

Answer 1

With jQuery you can do the following.

$('.gm-style-cc div span').css( 'color', 'red' );

Just for the second .gm-style-cc

$('.gm-style-cc').eq(1).find('div span').css('color', 'red');

This should also work in css

.gm-style-cc div span {
    color: red;
}

/* for only the second .gm-style-cc */ 
.gm-style-cc:eq(2) div span {
    color: red;
}

You may have to add !important if it is from a 3rd party library

To change to content:

var sp = $('.gm-style-cc div span');
var value = $('.gm-style-cc div span').text().split(' ');
var newValue = value[0]/1.609344;
sp.text(newValue + ' miles');

Answer 2

You can use basic JavaScript to find your element and replace km with miles .

The following code will search for all span s that are inside .gm-style-cc div s and that contain a number followed by km in their text, and then do the required replacement:

 // Selecting all spans that are inside .gm-style-cc divs var elms = document.querySelectorAll(".gm-style-cc span"); Array.prototype.forEach.call(elms, function(elm) { // Check if the text of the element contains a number followed by "km" if (elm.innerText.search(/\\d+ km/) !== -1) { // Converting km to miles miles = Number(elm.innerText.split(" ")[0]); miles = miles * 0.621371; // Creating the new contents elm.innerText = String(miles) + " miles"; } }) 

 <div class="gm-style-cc"> <div> <div></div> <div></div> </div><span>some text</span> <div> <a target="_new">Report a map error</a> </div> </div> <div class="gm-style-cc"> <div> <span>5000 km</span> </div> </div> 

Answer 3

Try this one [edited]

    (function(){

$('.gm-style-cc').find("span:contains('km')").each(function(i,ele){
        var miles = (parseInt($(this).text(),10) / 1.609344) + ' miles';
        $(ele).text(miles)
 })


})();