javascript – 如何使用jquery更改元素的位置

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用jquery更改元素的位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有html的东西如下:
<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>

根据配置的任意数量的选项.
查询

>更改< select class =“select”name =“customfield_10103”id =“customfield_10103”>的位置附加< select class =“select”name =“customfield_10102”id =“customfield_10102”> (40 px边距)并且还必须更改两个选择列表的宽度.
>之后,删除< div class =“field-group”>< label for =“customfield_10103”>选择list1< / label>< / div>

任何人都可以建议我,我如何使用JQUERY实现这一目标?

注意:仅供参考,我需要在JIRA自定义字段中进行此类自定义,这可以使用jquery实现.

另一个相关查询

以下是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>

我想删除“rowForcustomfield_10103”,只是它在“customfield_10102-val”旁边包含一个元素“customfield_10103-val”,并带有一些余量.
所以,之后它将如下所示:

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

另请告诉我.

尝试过以下但无法改变位置:

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


}

解决方法

试试这个
$("#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();

猜你在找的jQuery相关文章