Question

我有两个div，.div_data和.div_update其中

<select name=change_placement>
    <option value=0>Top</option>
    <option value=1>Bottom</option>
</select>

<div class='div_data'>Data Data</div>
<div class='div_update'>
    <form name=stuff>
        <input type=text>
    </form>
</div>

点击.div_update时如何在.div_data之前获得select[name=change_placement]？

Answer 1

使用insertBefore和insertAfter函数

$(function(){
   $('select').on('change', function(){
      var value = $(this).val();
      if(value == "1") {
        
        $('.div_update').insertAfter('.div_data');
      } else {
          $('.div_update').insertBefore('.div_data');
      }
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name=change_placement>
 <option value="0">Top</option>
 <option value="1">Bottom</option>
</select>

<div class='div_data'>
 Data
 Data
</div>
<div class='div_update'>
 <form name=stuff>
  <input type=text>
 </form>
</div>

强调文字

Answer 2

快速播放修正问题：

if(update_ticket_placement == 0) {
    var myparent = $('div.div_update');
    var parentparent = $('div.div_data');
    myparent.detach().prependTo(parentparent );
}

Answer 3

我在您的选择中添加了一个ID，并在您的下拉列表选项中添加了一个“选择”选项。我假设您在选择“顶部”时希望输入文本框位于另一个div之上。

$('#change_placement').on('change', function() {
   var option = $(this).val();
   if(option == 0) {
     $('.div_update').insertBefore($('.div_data'));
   } else {
     $('.div_update').insertAfter($('.div_data'));
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='change_placement' id='change_placement'>
 <option value=''>Select</option>
 <option value='0'>Top</option>
 <option value='1'>Bottom</option>
</select>

<div class='div_data'>
 Data
 Data
</div>
<div class='div_update'>
 <form name=stuff>
  <input type=text>
 </form>
</div>

Answer 4

您可以使用.insertAfter()在特定元素后插入targer元素。

$("select").change(function(){
    var value = $(this).val();
    $(".div_update").insertAfter(value == 1 ? ".div_data" : this);  
});

$("select").change(function(){
    $(".div_update").insertAfter($(this).val() == 1 ? ".div_data" : this);  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name=change_placement>
    <option value=0>Top</option>
    <option value=1>Bottom</option>
</select>
<div class='div_update'>
    <form name=stuff>
        <input type=text>
    </form>
</div>
<div class='div_data'>Data Data</div>

使用jquery onclick时如何更改元素的位置？

4 个答案: