javascript - 如何使用 jquery 将列表项 append 到另一个列表的开头/结尾？

Question

我有 2 个带有列表集的 ul。我想将第二个列表的项目 append 到第一个列表中，如图所示

List 1
<ul class="thumbicon"> <!-- need to append the class 'flex-direction-nav' -->
   <!-- append prev li -->
   <li>item 1<li>
   <li>item 2<li>
   <li>item 3<li>
   <!-- append next li -->
</ul>
 List 2
<ul class="flex-direction-nav">
  <li class="flex-nav-prev">
     <a class="flex-prev" href="#">Previous</a>
  </li>
  <li class="flex-nav-next">
     <a class="flex-next" href="#">Next</a>
  </li>
</ul>

我想要什么

<ul class="thumbicon flex-direction-nav"> 
  <li class="flex-nav-prev">
    <a class="flex-prev" href="#">Previous</a>
  </li>
  <li>item 1<li>
  <li>item 2<li>
  <li>item 3<li>
  <li class="flex-nav-next">
    <a class="flex-next" href="#">Next</a>
  </li>
 </ul>

在jquery中可以这样做吗？

Answer 1

首先将第一个 ul 中的类添加到第二个，然后将 li append 到第一个 li 之后的第二个 ul > 最后删除第一个 ul

$('.flex-direction-nav')
  .addClass($('ul.thumbicon')
  .attr('class'))
  .find('li:first')
  .append($('ul.thumbicon').children())
  
$('ul:first').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbicon"> 
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="flex-direction-nav">
  <li class="flex-nav-prev">
    <a class="flex-prev" href="#">Previous</a>
  </li>
  <li class="flex-nav-next">
    <a class="flex-next" href="#">Next</a>
  </li>
</ul>

或者，如果您想从第二个 div append 到第一个 div，您可以这样做。

$('.thumbicon')
  .addClass($('ul.flex-direction-nav').attr('class'))
  .prepend($('ul:eq(1) li:eq(0)'))
  .append($('ul:eq(1) li:eq(0)'))
  
$('ul:eq(1)').remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbicon"> 
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="flex-direction-nav">
  <li class="flex-nav-prev">
    <a class="flex-prev" href="#">Previous</a>
  </li>
  <li class="flex-nav-next">
    <a class="flex-next" href="#">Next</a>
  </li>
</ul>