javascript - 替换 ul 列表子元素

Question

假设我有一个列表

<ul class="ul-1">
  <li class="li-1">xx -1</li>
  <li class="li-2">xx -2</li>
  <li class="li-3">xx -3</li>
</ul>

然后我把它另存为

var list = $('.ul-1').html();

我可以填充另一个元素即

$('.ul-2').html(list);

但是如果我想替换第一个列表元素 <li class="li-1">xx -1</li> 怎么办？使用另一个列表元素，我如何使用 list 执行此操作多变的？谢谢

Answer 1

首先请注意，通常更好的做法是使用对 DOM 中元素的引用，而不是将它们序列化为在重新添加到 DOM 时需要再次反序列化的字符串。

此外，如果您使用 li 引用，您可以使用 jQuery 检索它们的 first()，然后是 replaceWith() 根据需要进行更改。试试这个:

var $list = $('.ul-1 > li');
$list.appendTo('.ul-2');
$list.first().replaceWith('<li>Foobar</li>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-1">
  <li class="li-1">xx -1</li>
  <li class="li-2">xx -2</li>
  <li class="li-3">xx -3</li>
</ul>

<ul class="ul-2"></ul>