如何使用jquery在另一个列表的开头/结尾附加列表项？

Question

我有2个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>

我想要什么

Form1.Table1.Locate('field', (Edit1.Text),[loCaseInsensitive] ) ;

在jquery中可以这样做吗？

Answer 1

首先将类从第一个remove添加到第二个，然后在ul之后将li添加到第二个ul，最后删除第一个li

ul

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

或者，如果你想从第二个追加到第二个div，你就可以这样做。

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

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

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

以上功能的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 Fiddle demo

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

Answer 3

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;