为什么在更改文本时删除了li元素中的链接(锚元素)？

Question

我遇到了jQuery 2.1.3的奇怪行为.当我替换列表中的锚元素中的文本时,锚被删除.我怀疑它与我的选择器有关,但我不明白为什么.

选择:

$("ul li:nth-child(2) a, ul li")

这个jsFiddle显示了我的代码并演示了奇怪的行为.

Answer 1

因为您正在选择<li>并且<a>标记是子标记,所以当您调用.text(...)该<a>标记时会被覆盖.

$(function() {
	$(document).on('click', '#translate', function(e) {
		var txt,
			araEnglish = new Array( 'one', 'two', 'three' ),
			araFrench = new Array( 'un', 'deux', 'trois' );
		if ($(this).text() == 'To French') {
			$(this).text('To Anglais');
			$('#lstCount li').each(function(i) {
				txt = araFrench[i];
				if ($(this).children().length) $(this).find('*:last-child').text(txt);
				else $(this).text(txt);
			});
		}
		else {
			$(this).text('To French');
			$('#lstCount li').each(function(i) {
				txt = araEnglish[i];
				if ($(this).children().length) $(this).find('*:last-child').text(txt);
				else $(this).text(txt);
			});
		}
	});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="lstCount">
  <li>one</li>
  <li><a href="*">two</a></li>
  <li>three</li>
</ul>
<br/>
<button id="translate">To French</button>