2013-07-02 16 views
6

ho roba html come di seguito:Come cambiare posizione dell'elemento utilizzando jQuery

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

qualsiasi numero di opzione ai sensi configurato. query:

  1. cambiamento della posizione di <select class="select" name="customfield_10103" id="customfield_10103"> accodare con <select class="select" name="customfield_10102" id="customfield_10102"> (con 40 margine px) e hanno anche cambiare la larghezza sia selezionare di elenco.

  2. Dopo di che, rimuovere <div class="field-group"><label for="customfield_10103">select list1</label></div>

Chiunque mi può suggerire, come ho potuto raggiungere questo obiettivo utilizzando jQuery?

NOTA: solo per riferimento, ho bisogno di tale personalizzazione nel campo personalizzato JIRA che può essere ottenuto utilizzando jQuery.

Un'altra query correlate:

Di seguito è roba 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> 

Voglio rimuovere "rowForcustomfield_10103" e solo essa è contenuta un luogo elemento "customfield_10103-val" a fianco di "customfield_10102-val "con un certo margine. così, dopo che sarà come di seguito:

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

Vi preghiamo anche essere informato su questo.

hanno tentato di seguito, ma in grado di cambiare posizione:

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


} 
+1

il tuo codice non è valido: la tua selezione non ha il numero '

+0

per spostare elementi nel DOM puoi usare' .append() 'http://api.jquery.com/append/ e '.remove()' http://api.jquery.com/remove/ per cambiare posizione usa '.css()' http://api.jquery.com/css/ Ci sono un sacco di esempi su pagine jquery – david

+0

mancato per copiare da firebug .. domanda aggiornata. – dsi

risposta

9

provare questo

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

Hai una domanda aggiornata con la query correlata. per favore fatemelo sapere su questo. – dsi

+0

ha fatto anche un'altra domanda .. mancato di mettere '# ".. errore stupido..grazie. – dsi

+0

Questa risposta mi ha aiutato, grazie per la pubblicazione. –

1

Ecco un approccio:

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

FIDDLE

+0

domande aggiornate con i relativi plz condividi il tuo commento su di esso. – dsi

Problemi correlati