如何使用jquery更改元素的位置
How to change position of element using 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">
(具有40px的边距),并且还必须更改两个选择列表的宽度。之后,移除
<div class="field-group"><label for="customfield_10103">select 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_0103-val",放在"customfield _10102-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();
这里有一种方法:
var $customfield_10103 = $('#customfield_10103'), $parent = $customfield_10103.parent();
$customfield_10103.appendTo($('#customfield_10102').parent()).css('marginLeft', '40px');
$parent.remove();
FIDDLE
相关文章:
- 使用javascript查找元素位置的最快方法
- 当静态元素与滚动上的固定元素位置重叠时进行检测
- 另一个元素JAVAscript中的元素位置
- CSS.滚动后元素位置发生变化
- JQuery Mobile单击事件不起作用,具体取决于HTML中的元素位置
- 正在查找表行中的td元素位置
- jquery追加元素位置始终为0
- 如何通过JS移动元素位置而不闪烁
- 当按钮点击更改元素位置时,Javascript
- 在事件发生时获取元素位置的当前页面 URL,并将该 URL 输出到另一个页面上
- 更改 JS/D3 页上的元素位置
- 字典中由元素:位置对组成的移动元素
- 观察元素位置并对 AngularJS 中的更改做出反应
- JavaScript 设置宽度尺寸会更改元素位置
- Angularjs 获取元素位置
- 按类名获取元素位置
- 从数组中获取元素位置
- 如何在更改选择元素宽度时固定所有元素位置
- 破解以在滚动条出现时保持水平元素位置
- 将第一个数组中的元素位置与另一个数组进行比较