Question

我在ul中有一个li，如下所示。

<li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window">Navigate Window</li>

我尝试使用以下代码更改此li的文字。

$('#list1 #' + selectedId).text('abcd');

使用此代码，文本正在改变。但它失去了input内的li。如何阻止替换整个li？

我还尝试使用stackoverflow中的以下内容。 change just text in li that contains img

我试着跟它一样，

$("ul.list-group > li.list-group-item > span.thetext").html('abcd');

我的ul课程为list-group。但我失败了。怎么办呢？

提前致谢！

Answer 1

最简单的解决方案是将文本包装在span内，然后使用选择器更改跨度的内容，例如

var selectedId = '1909';
$('#list1 #' + selectedId + ' span').text('abcd');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
  <li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window"><span>Navigate Window</span></li>
</ul>

如果无法做到，那么根据您的标记，您需要更改li的最后一个孩子的内容，以便

var selectedId = '1909';
$('#list1 #' + selectedId).contents().last().text('abcd');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
  <li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window"><span>Navigate Window</span></li>
</ul>

Answer 2

尝试使用.append()并将文字包装在span内，如下所示：

 $('#list1 #' + selectedId).append('<span>abcd</span>');

Working Demo

如何更改ul中的li文本而不更改其他属性？

2 个答案: