HTML

<select class="sel">
      <option value="1">one</option>
       <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">Four</option>
         </select>

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

jquery的

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

        var val=$(this).val();
              if(val == 1)
            {

            $(".first").show();
                  $(".second").show();
                   }
         if(val == 2)
            {
           $(".second").show();
            $(".first").show();
                   }
          if(val == 3)
           {
       $(".first").show();
               $(".second").hide();
           }
        });
       });

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

如果用户选择选项“two”，那么输出应该是这样的：

 second

 first

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

first

 second

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

 first

请任何人帮助我。这是js fiddledemo

Answer 1

使用以下策略：http://jsfiddle.net/2Ghqr/5/

说明：

当你遇到想要重新排序DOM元素的情况时，我们需要在dom中重新安排它们，你可以拿起元素然后将它们放在你想要的位置。

所以在这里，我只选择了first和second并将它们放在一个容器中。

正如你所看到的，我已经封装了第一个＆＃39;和第二个＆＃39;名为div的容器中的content。

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

我已将JavaScript修改为以下内容：

 $(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();
         }
     });
 });

Answer 2

<强> Demo Fiddle

如果您有多个if条件，请始终使用switch()个案例

使用

.prependTo() ：之前插入内容。虽然这给了一次解决方案。您必须使用insertBefore()
.detach() ：删除一组匹配的元素。

试试这个

 $(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;
         }

     });
 });

Answer 3

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

http://jsfiddle.net/2Ghqr/11/

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

是否可以根据更改功能更改div的顺序？

HTML

jquery的

3 个答案: