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


}

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


}

• javascript
• jquery

• 1 your code is invalid: your select have no <option>'s and no closing </select> tag – Fabrizio Calderan Commented Jul 2, 2013 at 8:39
• to move elements in the DOM you can use .append() api.jquery.com/append and .remove() api.jquery.com/remove to change position use .css() api.jquery.com/css There are tons of examples on jquery pages – m3div0 Commented Jul 2, 2013 at 8:41
• missed it to copy from firebug.. updated question. – dsi Commented Jul 2, 2013 at 8:41
• yes @FabrizioCalderan is right, though if you have valid html look at .css function api.jquery.com/css – Dipak Yadav Commented Jul 2, 2013 at 8:42

2 Answers 2

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

Here is one approach:

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

FIDDLE