Dhaval Dhaval - 7 months ago 8
Javascript Question

How to change position of element using jquery

I have html stuff as below:

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


any number of option as per configured.
query:


  1. change the position of
    <select class="select" name="customfield_10103" id="customfield_10103">
    to append with
    <select class="select" name="customfield_10102" id="customfield_10102">
    (with 40 px margin) and also have to change both select list's width.

  2. After that, remove
    <div class="field-group"><label for="customfield_10103">select list1</label></div>



Any one can suggest me , how i could achieve this using JQUERY?

NOTE: just for reference, i need such customization in JIRA custom field which can be achievable using jquery.

Another related query:

Below is HTML stuff:

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


I want to remove "rowForcustomfield_10103" and just it's contained a element "customfield_10103-val" place at next to "customfield_10102-val" with some margin.
so, after that it will look as below:

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


Please also let me know on this.

have tried below but unable to change position:

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

try this

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