Wie Position des Elements ändern jquery mit

Question

I wie unten html Zeug:

<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> 

eine beliebige Anzahl von Optionen gemäß konfiguriert. Abfrage:

1. Änderung der Position des <select class="select" name="customfield_10103" id="customfield_10103"> mit <select class="select" name="customfield_10102" id="customfield_10102"> (mit 40 px Rand) anhängen und müssen auch Breite beide Auswahlliste ändern.

2. Danach entfernen <div class="field-group"><label for="customfield_10103">select list1</label></div>

Jeder mich vorschlagen kann, wie könnte ich diese JQUERY mit erreichen?

HINWEIS: nur als Referenz, ich brauche solche Anpassung in JIRA benutzerdefinierte Feld, die mit jquery erreichbar sein kann.

Ein anderes verwandtes query:

Im Folgenden finden Sie HTML Zeug:

<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> 

ich will "rowForcustomfield_10103" entfernen, und es ist nur ein Element "customfield_10103-val" Platz an neben „customfield_10102-val enthalten "Mit etwas Abstand. so nach, dass es wie folgt aussehen:

`<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>` 

Bitte lassen Sie mich auch auf das wissen.

haben versucht, unten aber nicht in der Lage Position zu ändern:

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

versuchen, diese

$("#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

Hier ist ein Ansatz:

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

FIDDLE