CODEWITHSUNDEEP
jquery
I haz kode
I haz kode

Reputation: 1635

Append text to a span targeted by the content of sibling span

I have this structure:

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

Using jQuery, I need to append the unit (m²) to the 3000 so that it looks like this 3000m² .

I can't do this with CSS because I cannot modify the html and the list order changes so I need to target the text.

Here's my code:

$("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>

Upvotes: 1

Views: 155

Answers (2)

Tomonso Ejang
Tomonso Ejang

Reputation: 1366

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

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You almost had it, move ~.text-muted out of :contains() like below

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

Demo

$("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>

Upvotes: 2

Related Questions