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

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

列表1

项目1

项目2

项目3


清单2

我想要什么

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

项目1

项目2

项目3

在jquery中可以这样做吗？

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

---

您可以这样尝试。

首先将类从第一个

ul

添加到第二个

li

中，然后在第一个

li

之后将

li

附加到第二个

ul

中，最后删除第一个

ul

$（'.flex direction nav'）
.addClass（$（'ul.thumbicon'））
.attr（'class'））
.find（'li:first'）
.append（$（'ul.thumbicon'）.children（）
$（'ul:first'）.remove（）

项目1
项目2
项目3

选择第一个li using并将其附加到目标ul using的第一个，选择第二个（在本例中是最后一个）li using并将其附加到目标ul using的末尾

$（“.flex direction nav>li:first”）.prependTo（“.thumbicon”）；
$（“.flex direction nav>li:last”）.appendTo（“.thumbicon”）；
$（“.flex direction nav”）.remove（）

清单1

项目1

项目2

项目3


清单2





它非常简单

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


var$next=$（'.flex-nav-next'）；
变量$prev=$（'.flex-nav-prev'）；
$（'.flex direction nav'）.remove（）；//如果你需要
$（'.thumbicon'）.append（$next）.prepend（$prev）.addClass（'flex-direction-nav'）


项目1
项目2
项目3






虽然这很容易用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();


函数wrapWithNavigation（）{
让source=document.querySelector（'.thumbicon'），
navigationSource=document.querySelector（'.flex direction nav'）；
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(
from（navigationSource.classList）.join（）的数组
)
navigationSource.parentNode.removeChild（navigationSource）；
}
幽灵导航（）


项目1
项目2
项目3






您将如何使用按钮单击或其他方式执行此操作？否。在onload函数中是否可以按照我的要求将第二个附加在第一个中。是否可以在versaIt中使用在我的页面中创建的其他列表附加内容是否可以使用类名执行此操作，在末尾添加类的位置是否可以删除空类list@user3386779是，
$（“.flex direction nav”）.remove（）
// 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();