Question

我有一个带有表单和选择元素的HTML。

...
<select id="sQuantity" name="sQuantity">
<option value="1">1</option>
</select>
...
<form name="myform" method="post" action="/someplace">
<input type="hidden" name="forminput" value="" />
...
</form>
...

我想要的是将表单开始标记移动到表单上方和外部的select元素上方。因为我不能改变组装HTML的模板，所以我不能用通常的方法来做到这一点。

是否可以使用jquery执行此操作？

我不想触摸表单中的任何元素，一切都应该保持原样。我只想移动表单的开始标记，使其看起来像这样：

...
<form name="myform" method="post" action="/someplace">
<select id="sQuantity" name="sQuantity">
<option value="1">1</option>
</select>
...
<input type="hidden" name="forminput" value="" />
...
</form>
...

编辑：

我无法移动选择元素，我必须移动表单。这是因为select元素会松开它的Position和样式，因为表单在文档中更进一步。

Answer 1

尽管给出了答案，我还是决定给出自己的答案。我已经做了一些有用的东西，至少只要我们确定没有名称为myform的其他元素。

var elements = [];
var elem = $("#sQuantity");
while (elem.attr('name') != "myform")
{
    var next = elem.next();
    elements.push(elem);
    elem = next;
}
for (var i = elements.length - 1; i >= 0; --i)
    $("form[name='myform']").prepend(elements[i]);

它获得next()的兄弟，然后检查元素名称是否等于“myform”。如果没有，则将其添加到名为elements的数组中，然后继续执行下一个，直到找到名为“myform”的元素，该元素应该是表单。然后，从数组的底部开始，它将元素预先添加到表单中，从而保留顺序。

Here's a jsfiddle test

Answer 2

试试这个：

$select=$("#sQuantity").clone();
$("#sQuantity").remove();
$("form[name='myform']").prepend($select);

DEMO

Answer 3

根据您的描述，移动select元素应该会产生相同的结果，并且会更容易：

var $sQuantity = $("#sQuantity").detach();
$('form[name="myForm"]').prepend($sQuantity);

要移动开场代码，您只需要查看wrap()和unwrap()：

var myForm = $('form[name="myForm"]');
myForm.children().unwrap();
$('.sectionToWrap').wrap(myForm);

JQuery - 移动表单打开标记

3 个答案: