Javascript 是否可以根据更改函数更改div的顺序？

我正在研究JQueryMoles。 我必须根据选择框中值的变化来更改显示div的顺序

html 我必须根据值的变化改变显示div的顺序

如果用户选择选项“2”，则输出应如下所示：

 second

 first

如果用户选择选项“一”，则输出应为

first

 second

如果用户选择选项“三”，则应显示：

 first 

请任何人帮助我。

---

以下是

使用以下策略：

说明：

当您遇到需要对DOM元素重新排序的情况时，我们需要将它们重新附加到DOM中，您可以拾取元素，然后将它们放置在您想要的位置

在这里，我简单地选择了

第一个

和

第二个

，并将它们相应地放在一个容器中

如您所见，我已将“first”和“second”div封装在名为

content

的容器中

<div class="content">
    <div class="first">first</div>
    <div class="second">second</div>
</div>

如果有多个If条件，请始终使用

switch（）

cases

使用

• ：在之前插入内容。虽然这是一次性解决方案。您必须使用

  insertBefore（）

• ：删除一组匹配的元素

试试这个

 $(document).ready(function () {
     $(".sel").change(function () {
         switch (this.value) {
             case '1':
                 $('.first').insertBefore('.second');
                 break;
             case '2':
                 $('.second').insertBefore('.first');
                 break;
             case '3':
                 $('.second').hide();
                 break;
         }

     });
 });

---

最简单的方法是使用before（）：

---

您需要为所有onchange函数编写单独的HTML，并根据需要附加/替换它们。问题是它按照您的意愿工作……它工作得不好。如果你选择了1-2-1个divs，那就麻烦了。这是一个例子，你应该在任何案例的开头使用insertBefore（）和show（），因为在案例3中，你隐藏了其中的一个。这是一次性的解决办法。此外，我还向OP建议了

insertBefore（）

。更新了我的答案。是的，您确实建议了。prependTo（）不是这里的选项，因为它在选择器的开头插入内容，而不是像您所说的那样插入内容。prependTo（）：在前面插入内容。“现在代码更好了！”）

<div class="content">
    <div class="first">first</div>
    <div class="second">second</div>
</div>

 $(document).ready(function () {
     $(".sel").change(function () {

         var val = $(this).val();
         if (val == 1) {
            $('.content').append($(".first")).append($('.second'));
             $(".first").show();
             $(".second").show();
         }
         if (val == 2) {
             $('.content').append($('.second')).append($(".first"));
             $(".second").show();
             $(".first").show();
         }
         if (val == 3) {
             $(".first").show();
             $(".second").hide();
         }
     });
 });

 $(document).ready(function () {
     $(".sel").change(function () {
         switch (this.value) {
             case '1':
                 $('.first').insertBefore('.second');
                 break;
             case '2':
                 $('.second').insertBefore('.first');
                 break;
             case '3':
                 $('.second').hide();
                 break;
         }

     });
 });

      $( ".sel" ).change(function() {

        var value=$(this).val();
            if(value==1){
                $('.second').before($('.first'));
            }
            if(value==2){
                $('.first').before($('.second'));
            }
            if(value==3){
                $('.second').before($('.first'));
            }
        });