JavaScript 将前 10 个项目从一个选项列表移动到另一个选项列表答案

【问题标题】：JavaScript Moving First 10 Items From One Options List To AnotherJavaScript 将前 10 个项目从一个选项列表移动到另一个选项列表
【发布时间】：2017-05-17 15:48:25
【问题描述】：

我有以下代码：

function moveAllItems(source, dest)
{
     $("#"+source+" option").appendTo("#"+dest);
}

我希望此代码将源列表中的前 10 个项目附加到目标列表，而不是一次附加所有项目。有没有办法做到这一点？

我正在考虑做这样的事情：

function moveAllItems(source, dest)
{
     var x = 0;
     while(x < 10){
          $("#"+source".options[i]).appendTo("#"+dest);
          x++;
     }
}

但这显然行不通。我脑子里有这个想法，但我知道执行它的正确语法

【问题讨论】：

有几种方法。一种简单的方法是使用 CSS 样式 nth-child 选择器。喜欢option:nth-child(-n+10)
那会是什么样子？
@Liam OP 希望前 10 个项目从一个元素移动到另一个元素。到目前为止，他们已经做出了努力。虽然它可能很简单，并且可能会受到欺骗，但这是一个很好的问题 (imo)。
问题是@liam 的正确语法是什么

标签： javascript list options items

【解决方案1】：

最简单的方法是通过 CSS 选择器，如下所示；

function moveAllItems(source, dest)
{
     $("#"+source+" option:nth-child(-n+10)").appendTo("#"+dest);
}

这将移动前 10 个项目。这是一个 JSFiddle，它正在工作

您也可以使用:eq() CSS 选择器并按照您的建议使用循环，如下所示；

function moveAllItems(source, dest)
{
     var x = 0;
     while(x < 10){
          $("#"+source+" option:eq("+x+")").appendTo("#"+dest);
          x++;
     }
}

:eq() 选择器选择第 n 个元素，因此在这种情况下您将单独移动每个项目。不过，这可能比它的价值更麻烦。

【讨论】：

谢谢，第一个效果很好。直到现在我想开始阅读 CSS 选择器时我才知道。
不用担心，熟悉 CSS 选择器很有用，尤其是在使用 jQuery 时

【解决方案2】：

你可以试试这样的：

function moveItems(n, source, dest) {
    for(var i = 0; i < n; i++) {
        $("#" + source + " option:eq(" + i + ")").appendTo("#" + dest);
    }
}

这只会移动该函数的第一个参数中指定的 n 个项目。

【讨论】：

:eq 部分是做什么的？这是您在 HTML 中选择第 i 个元素的方式吗？
好吧，这似乎是 jquery。试图运行它并且项目没有被移动。我知道有一个正确的方法可以做到这一点，我开始认为 .appendTo 不是解决方法
@Zeusftw 确实：eq 得到第 n 个元素。
@Zeusftw 我弄错了，用编辑后的版本再试一次。

【解决方案3】：

我会做类似下面的例子：

function moveAllItems(source, dest) {
  var x = 0;
  var $src = $('#' + source);
  var $des = $('#' + dest);
  
  while (x < 10) {
    var $opt = $src.find('option').eq(x).clone();
    $des.append($opt);
    x++;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
   <option selected>One</option>
   <option>Two</option>
   <option>Three</option>
   <option>Four</option>
   <option>Five</option>
   <option>Six</option>
   <option>Seven</option>
   <option>Eight</option>
   <option>Nine</option>
   <option>Ten</option>
   <option>Eleven</option>
   <option>Twelve</option>
   <option>Thirteen</option>
   <option>Fourteen</option>
   <option>Fiftheen</option>
</select>
<select id="select2"></select><br />
<input type="button" value="Export" onclick="moveAllItems('select1', 'select2')" />

【讨论】：