当元素具有子元素并使用JQuery时，如何仅在HTML中更改文本？

Question

以下代码：

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

如果我使用

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

然后里面的所有html代码都会改变，这不是我需要的。

请注意，有两个先决条件：

1. 子元素中没有任何标签或ID。
2. 我们不知道子元素的深度，可以得出的结论是要求是更改最深的子元素的文本。
3. 如果在解决方案中使用原始javascript会很好，但必须使用$('div[myLable="a"]')表单，因为父元素没有id但只有用户定义标签，所以我需要这个Jquery表单。

如何在这种情况下更改文字？

提前致谢，

娲

Answer 1

您需要更改span内的文字。因此，请使用指向span的适当选择器：

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

Answer 2

var $target = $('div[myLable="a"]').children();
$next = $target;

while( $next.length ) {
  $target = $next;
  $next = $next.children();
}

$target.text("change");