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

Question

我有一個li像下面的UL。

<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');

使用此代碼，文本正在改變。 但它失去了li的input 。 如何防止更換整個li ？

而且我在stackoverflow中嘗試了以下內容。 只更改包含img的li中的文本

我嘗試過如下，

$("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>');

工作演示