文本追加到由同級跨度

Question

的內容的有針對性的跨度我有這樣的結構：

<li class="list-group-item"> 
    <span class="text-primary">Built-up</span>: 
    <span class="text-muted">3000</span> 
</li> 

使用jQuery，我需要追加單元（平方米）到，使它看起來像這樣3000m²。

我不能用CSS做這件事，因爲我不能修改html和列表順序的改變，所以我需要定位文本。

這裏是我的代碼：

$("span:contains('Built-up'~.text-muted)").append("<p>m²</p>");

li { 
 
    display: inline-block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="list-group-item"> 
 
    <span class="text-primary">Built-up</span>: 
 
    <span class="text-muted">3000</span> 
 
</li>

Answer 1

你幾乎擁有它，移動~.text-muted出:contains()像下面

$("span:contains('Built-up')~.text-muted") 

演示

$("span:contains('Built-up')~.text-muted").append("<p>m²</p>");

li { 
 
    display: inline-block 
 
} 
 

 
li.list-group-item p{ 
 
display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="list-group-item"> 
 
    <span class="text-primary">Built-up</span>: 
 
    <span class="text-muted">3000</span> 
 
</li>

Answer 2

$(document).ready(function() { 
    $("span:contains('Built-up')~.text-muted").append("m<sup>2</sup>"); 
})