如何使用jQuery在另一个列表的开头/结束时附加列表项目

Question

我有2 ul列表。我想在第一个列表中附加第二个列表的项目，如图所示

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的s添加到第一个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附加到第一次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>

Answer 2

虽然很容易用jQuery编写，但我也想显示一个普通的JavaScript解决方案：

// using a named function, to enable re-use if required:
function wrapWithNavigation() {
  // initialising variables with 'let' rather than 'var',
  // this requires an ES6-compatible browser, but can be
  // made ES5 compatible by replacing 'let' with 'var'.
  // retrieving the first - if any - elements that match
  // the supplied CSS selectors:
  let source = document.querySelector('.thumbicon'),
    navigationSource = document.querySelector('.flex-direction-nav');
  // converting the NodeList of the navigationSource's child elements
  // (note 'children' an not 'childNodes') into an Array, and
  // iterating over that Array using Array.prototype.forEach() with
  // an Arrow function (again, this requires ES6-compatibility):
  Array.from(navigationSource.children).forEach(
    // navigationChild is a reference to the current Array-element
    // of the Array of child-elements over which we're iterating:
    navigationChild => {
      // if the text-content, converted to lowercase, of the
      // element contains the string 'prev':
      if (navigationChild.textContent.toLowerCase().indexOf('prev') > -1) {
        // we then insert the child-element before the the first-child
        // of the source element, using ParentNode.insertBefore():
        source.insertBefore(navigationChild, source.firstChild);
      // otherwise if the lowercase text-content contains the string
      // 'next' we use Node.appendChild() to add the current child-
      // element as the last-child of the source element:
      } else if (navigationChild.textContent.toLowerCase().indexOf('next') > -1) {
        source.appendChild(navigationChild);
      }
    });
  // we use the Element.classList API to add class-names to
  // the source element:
  source.classList.add(
    // we convert the classList (an Array-like list of
    // class-names) of the navigationSource element into
    // a String, using Array.prototype.join(), to create
    // a comma-separated String of class-names to pass to
    // the add() method of the Element.classList API:
    Array.from(navigationSource.classList).join()
  )
  // we then find the parent-node of the navigationSource
  // element, and remove the navigationSource element using
  // parentNode.removeChild() (this wasn't mentioned in the
  // question, and if you wish to retain the navigationSouce
  // element this line can be omitted):
  navigationSource.parentNode.removeChild(navigationSource);
}
wrapWithNavigation();

function wrapWithNavigation() {
  let source = document.querySelector('.thumbicon'),
    navigationSource = document.querySelector('.flex-direction-nav');
  Array.from(navigationSource.children).forEach(
    navigationChild => {
      if (navigationChild.textContent.toLowerCase().indexOf('prev') > -1) {
        source.insertBefore(navigationChild, source.firstChild);
      } else if (navigationChild.textContent.toLowerCase().indexOf('next') > -1) {
        source.appendChild(navigationChild);
      }
    });
  source.classList.add(
    Array.from(navigationSource.classList).join()
  )
  navigationSource.parentNode.removeChild(navigationSource);
}
wrapWithNavigation();

<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>

Js小提琴演示。

以上功能的ES5兼容替代方案如下：

function wrapWithNavigation() {
  var source = document.querySelector('.thumbicon'),
    navigationSource = document.querySelector('.flex-direction-nav');
  Array.prototype.slice.call(navigationSource.children).forEach(
    function(navigationChild) {
      if (navigationChild.textContent.toLowerCase().indexOf('prev') > -1) {
        source.insertBefore(navigationChild, source.firstChild);
      } else if (navigationChild.textContent.toLowerCase().indexOf('next') > -1) {
        source.appendChild(navigationChild);
      }
    });
  source.classList.add(
    Array.prototype.slice.call(navigationSource.classList).join()
  )
  navigationSource.parentNode.removeChild(navigationSource);
}
wrapWithNavigation();

<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>

Js小提琴演示。

和jQuery替代方案：

// again, using a named-function to allow for re-use:
function wrapWithNavigation() {
  // finding the first, using eq(0), of any elements matching
  // the supplied selectors:
  let thumbicon = $('.thumbicon').eq(0),
    navigationSource = $('.flex-direction-nav').eq(0);
  // moving to the child elements of the navigationSource
  // element, using each():
  navigationSource.children().each(function() {
    // using the same checks as above, using 'plain'
    // JavaScript rather than jQuery to retrieve the
    // text-content:
    if (this.textContent.toLowerCase().indexOf('prev') > -1) {
      // prepending the current child-element to the
      // thumbicon element:
      $(this).prependTo(thumbicon);
    } else if (this.textContent.toLowerCase().indexOf('next') > -1) {
      // appending the current element (if it matches the
      // above test) to the thumicon element:
      $(this).appendTo(thumbicon);
    }
  // returning to the previous selection (that of the
  // navigationSource) using end(), and iterating over
  // that selection - of one - using each():
  }).end().each(function() {
    // using addClass() to add the class-name of the
    // current element to the thumbicon element:
    thumbicon.addClass(this.className);
  // and finally removing the navigationSource element
  // using the remove() method:
  }).remove();
}
wrapWithNavigation();

function wrapWithNavigation() {
  let thumbicon = $('.thumbicon').eq(0),
    navigationSource = $('.flex-direction-nav').eq(0);
  navigationSource.children().each(function() {
    if (this.textContent.toLowerCase().indexOf('prev') > -1) {
      $(this).prependTo(thumbicon);
    } else if (this.textContent.toLowerCase().indexOf('next') > -1) {
      $(this).appendTo(thumbicon);
    }
  }).end().each(function() {
    thumbicon.addClass(this.className);
  }).remove();
}
wrapWithNavigation();

<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>

JS小提琴演示。

Answer 3

使用 :first选择第一个li，并在目标ul的第一个使用 .prependTo()附加并使用 :last选择第二个（在这种情况下是最后一个）li并在目标ul的末尾附加使用.appendTo()。

$(".flex-direction-nav > li:first").prependTo(".thumbicon");
$(".flex-direction-nav > li:last").appendTo(".thumbicon");
$(".flex-direction-nav").remove();

$(".flex-direction-nav > li:first").prependTo(".thumbicon");
$(".flex-direction-nav > li:last").appendTo(".thumbicon");
$(".flex-direction-nav").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
List 1
<ul class="thumbicon">
   <li>item 1<li>
   <li>item 2<li>
   <li>item 3<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>

您也可以在一条jQuery

的一行中完成这项工作

$(".flex-direction-nav > li").prependTo(".thumbicon").last().appendTo(".thumbicon");
$(".flex-direction-nav").remove();

Answer 4

$('ul:first-child').append('<li>...</li>');

您可以像这样尝试。

Answer 5

它很简单

$('.thumbicon').append($next).prepend($prev).addClass('flex-direction-nav');

var $next = $('.flex-nav-next');
var $prev = $('.flex-nav-prev');
$('.flex-direction-nav').remove(); // If you needed
$('.thumbicon').append($next).prepend($prev).addClass('flex-direction-nav');

<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>