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

Question

我有一个像

这样的 DOM 元素

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

我想在第二个跨度中将公里替换为英里，但我什至无法访问特定跨度

为了测试，我首先尝试改变颜色，我尝试了以下方法，但没有得到确切的值

.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;
}

如何获取span元素的具体位置？

编辑:按照 Mazz 的建议

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

似乎显示了变化，但它适用于所有跨度，我想要二等舱的跨度

Answer 1

使用 jQuery，您可以执行以下操作。

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

只为第二个.gm-style-cc

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

这应该也适用于 css

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

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

如果它来自第 3 方库，您可能必须添加 !important

改变内容:

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