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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

将文本附加到兄弟范围内容所针对的范围

2 个答案: