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>

Answer 2

根据您的选择器，您要替换<li>元素和 <a>元素中的文字。当您替换所有<li>元素中的文字时，其子<a>元素将被删除。

我建议您在选择器中添加:not:has(a)，这样您就可以选择不包含<li>的所有<a>元素。

＆＃13;

$(function() {
  $("button").on("click",
    function() {
      $("ul li a, ul li:not(:has(a))").each(
        function(index) {
          switch (index) {
            case 0:
              $(this).text("un");
              break;
            case 1:
              $(this).text("deux");
              break;
            default:
              $(this).text("trois");
              break;
          }
        });
    });
});

＆＃13;

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

＆＃13;

请参阅：
:has() selector - 包含至少一个与指定选择器匹配的元素 :not() selector - 与给定的选择器不匹配。

Answer 3

这是fixed fiddle。

请注意，选择器已更改：

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

问题在于原始选择器

ul li

无论li内部是什么，

都会替换选择器$(function() { $("button").on("click", function(e) { var araEnglish = new Array( 'one', 'two', 'three' ), araFrench = new Array( 'un', 'deux', 'trois' ), $thisTxt = $(this).text().trim(); $("ul li:nth-child(2) a, ul li:not(:nth-child(2))").each(function(i) { if ($thisTxt == 'To French') txt = $(this).text(araFrench[i]); else txt = $(this).text(araEnglish[i]); }); $(this).text($thisTxt == 'To French' ? 'To Anglais' : 'To French'); }); });第二部分指定的所有li标记。

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

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

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

3 个答案: