Question

For the following code:

<div myLable="a"><p><span style="color:#00aaFF">change me only 1</span></p></div>
<div myLable="b"><span style="color:#00aaFF">change me only 2</span></div>

If I use

$('div[myLable="a"]').text("change");
$('div[myLable="b"]').text("change");

Then all the html code inside will be change, it was not what I need.

Note that there are two pre-condition:

1. No any label or id in the child element.
2. We’ve no idea how deep the child element in, what can conclude is that the requirement is to change the most deepest child element’s text.
3. It will be good if using raw javascript in solution, but must use the $('div[myLable="a"]') form because the parent element has no id but only a user-define label, so I need this Jquery form.

How can I change the text only in this case?

Thanks in advance,

Wa

Answer 1

You need to change the text inside of span. So use apropriate selector which point to span:

$('div[myLable="a"] span').text("change");