jquery - 将文本附加到同级跨度的内容所定位的跨度

Question

我有这样的结构:

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

使用 jQuery，我需要将单位 (m²) 附加到 3000，使其看起来像这样 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>