Javascript 将 X div 从一个父级移动到另一个父级

Question

在我的代码中有两个包含更多 div 的 div。像这样:

echo '<div id="outside-one">';
    echo '<div class="inside" id="1"></div>';
    echo '<div class="inside" id="2"></div>';
    echo '<div class="inside" id="3"></div>';
    echo '<div class="inside" id="4"></div>';
    echo '<div class="inside" id="5"></div>';
    echo '<div class="inside" id="6"></div>';
    echo '<div class="inside" id="7"></div>';
    echo '<div class="inside" id="8"></div>';
    echo '<div class="inside" id="9"></div>';
    echo '<div class="inside" id="10"></div>';
echo '</div>';

echo '<div id="outside-two">';
    echo '<div class="inside" id="11"></div>';
    echo '<div class="inside" id="12"></div>';
    echo '<div class="inside" id="13"></div>';
    echo '<div class="inside" id="14"></div>';
    echo '<div class="inside" id="15"></div>';
    echo '<div class="inside" id="16"></div>';
    echo '<div class="inside" id="17"></div>';
    echo '<div class="inside" id="18"></div>';
    echo '<div class="inside" id="19"></div>';
    echo '<div class="inside" id="20"></div>';
echo '</div>';

第二个父 div ( ID 2 ) 带有 css 属性，display:none;

每当用户滚动到网站底部时，我想将五个(或 X ammount)div 从第二个父级移动到第一个，以便显示它们。

我试着用下面的js代码来做:

<script>
    document.getElementById('outside-two').appendChild(
        document.getElementById('11')
    );
</script>

我在这里遇到的唯一问题是，我不知道第二个父级中的 div 的确切 ID 号。它们可能像我上面的示例一样有序，但也可能是乱序的。

我认为完美的解决方案是在每次用户滚动到底部时只使用一个 for 循环。一个要求肯定是第二个父级中仍然有剩余的 div。

有没有办法让我只选择父 div 的 X 个子元素？或者谁有更好的解决方案？谢谢。

Answer 1

选择子项，将前五个元素切片，并将它们附加到另一个 div。

$('#outside-two').children().slice(0,5).appendTo("#outside-one");