Làm thế nào để thay đổi vị trí của nguyên tố sử dụng jquery

Question

Tôi có thứ html như sau:

<div class="field-group"> 
<label for="customfield_10102">select list</label> 
<select class="select" name="customfield_10102" id="customfield_10102"> 
    <option value="-1">None</option> 
</select> 
</div> 
<div class="field-group"> 
<label for="customfield_10103">select list1</label> 
<select class="select" name="customfield_10103" id="customfield_10103"> 
    <option value="-1">None</option> 
</select> 
</div> 

bất kỳ số lượng tùy chọn theo cấu hình. truy vấn:

1. thay đổi vị trí của <select class="select" name="customfield_10103" id="customfield_10103"> để nối thêm với <select class="select" name="customfield_10102" id="customfield_10102"> (với 40 lề px) và cũng có thể phải thay đổi chiều rộng cả hai chọn danh sách của.

2. Sau đó, loại bỏ <div class="field-group"><label for="customfield_10103">select list1</label></div>

Bất kỳ ai có thể gợi ý cho tôi, làm thế nào tôi có thể đạt được điều này sử dụng jQuery?

LƯU Ý: chỉ để tham khảo, tôi cần tùy chỉnh như vậy trong trường tùy chỉnh JIRA có thể đạt được bằng cách sử dụng jquery.

Một truy vấn liên quan:

Dưới đây là thứ HTML:

<li id="rowForcustomfield_10102" class="item"> 
    <div class="wrap"> 
     <strong title="select list" class="name">select list:</strong> 
     <div id="customfield_10102-val" class="value type-select editable-field  inactive" 
      data-fieldtype="select" title="Click to edit"> 
      final2 <span class="overlay-icon icon icon-edit-sml" /> 
     </div> 
    </div> 
</li> 
<li id="rowForcustomfield_10103" class="item"> 
    <div class="wrap"> 
     <strong title="select list1" class="name">select list1:</strong> 
     <div id="customfield_10103-val" class="value type-select editable-field inactive" 
      data-fieldtype="select" title="Click to edit"> 
      1 <span class="overlay-icon icon icon-edit-sml" /> 
     </div> 
    </div> 
    </li> 

Tôi muốn loại bỏ "rowForcustomfield_10103" và chỉ cần nó chứa một yếu tố "customfield_10103-val" diễn ra tại bên cạnh "customfield_10102-val "với một số lợi nhuận. vì vậy, sau đó nó sẽ trông như sau:

`<li id="Li1" class="item"> 

    <div class="wrap"> 
     <strong title="select list" class="name">select list:</strong> 
     <div id="Div1" class="value type-select editable-field inactive" 
      data-fieldtype="select" title="Click to edit"> 
      final2 <span class="overlay-icon icon icon-edit-sml" /> 
     </div> 
     <div id="Div2" class="value type-select editable-field inactive" 
      data-fieldtype="select" title="Click to edit"> 
      1 <span class="overlay-icon icon icon-edit-sml" /> 
     </div> 
    </div> 
</li>` 

Xin vui lòng cho tôi biết về điều này.

đã cố gắng dưới đây nhưng không thể thay đổi vị trí:

if(AJS.$("rowForcustomfield_10102").length > 0) 
{ 

AJS.$("customfield_10102-val").after(AJS.$('customfield_10103-val')); 
AJS.$('customfield_10103-val').css({ 'margin-left': '40px','width':'80px' }) 
AJS.$('customfield_10102-val').css({ 'width': '80px' }); 
AJS.$("#rowForcustomfield_10102 .name").html(null); 
AJS.$("#rowForcustomfield_10103 .name").html(null); 


} 

Answer 1

thử này

$("#customfield_10102").after($('#customfield_10103')); 
    $('#customfield_10103').css({ 'margin-left': '40px','width':'200px' }) 
    $('#customfield_10102').css({ 'width': '200px' }); 
    $('[for="customfield_10103"]').closest('.field-group').remove(); 

Answer 2

Dưới đây là một cách tiếp cận:

var $customfield_10103 = $('#customfield_10103'), $parent = $customfield_10103.parent(); 
$customfield_10103.appendTo($('#customfield_10102').parent()).css('marginLeft', '40px'); 
$parent.remove(); 

FIDDLE