Javascript 如何在一个地方上上下移动div使用jquery中的onclick

这是我的第一篇帖子，所以我请求帮助和可能的评论。 当我使用jQuery函数单击“onclick”时，我想将div（通过使用工具AddR添加）上下改变一个位置。 我写了那样的东西，但没有用。。 有人能帮我改进什么吗？ 谢谢你的帮助

<script>
  function AddR(k) {
    Radio_L = Radio_L + 1;
    Radio_N = "Radio" + Radio_L;
    $("#" + k.id + "").append("<div  id='"+Radio_N+"'>" + Radio_N + "<br /><br />" +
      "<button type='submit' class='button' style='float: left;' onclick='AddR(" + Radio_N + ");' >Add</button>" +
      "<button type='submit' class='button' style='float: left;' onclick='UpR(" + Radio_N + ");' >Up</button>" +
      "<button type='submit' class='button' style='float: left;' onclick='DownR(" + Radio_N + ");' >Down</button><br />" +
      "<br />"  + "<input type='text'>" + "<br /><br />" + '</div>'
    );
  }

  function UpR(k) {
    var pos = (this).index();
    var parent = $("#" + k.id + "");
    parent.insertAfter(pos.next());
  }

  function DownR(k) {
    var pos = (this).index();
    var parent = $("#" + k.id + "");
    parent.insertBefore((pos.next());
  }
</script>

函数地址（k）{
Radio_L=Radio_L+1；
Radio_N=“Radio”+无线电；
$（“#“+k.id+”）。追加（“+Radio\u N+”

”+
“添加”+
“向上”+
“向下
”+
“
”+”“+”

“+”
);
}
功能UpR（k）{
var pos=（this.index（）；
var parent=$（“#”+k.id+”）；
parent.insertAfter（位置next（））；
}
函数DownR（k）{
var pos=（this.index（）；
var parent=$（“#”+k.id+”）；
parent.insertBefore（（位置next（））；
}

应该是

var pos = $(this).index();

也

pos会给你一个号码

，而他们没有

next

方法。只有

jQuery对象

有

试试这个

 function UpR(k) {
        var $elem = $(this).next();
        var parent = $("#" + k.id + "");
        parent.insertAfter($elem);

    }

尝试此代码（也在此处：），我发现一些语法错误：

<script>
var Kon_L = 0;

function Kon() {
    Kon_L = Kon_L+ 1;
    var Kon_R_N = "Kon" + Kon_L;

    $("<div id='" + Kon_R_N + "' class='ka' > " + "Kon " + Kon_L + 
      "<button  type='submit' class='button' style='float: left;' onclick='UpR(\"" + Kon_R_N + "\");' >UpDIV</button>" +
      "<button type='submit'  class='button' style='float: left;' onclick='DownR(\"" + Kon_R_N + "\");' >DownDIV</button>" +
      "<br />Tekst<br />" +
      "</div>").appendTo(".Place");
}

function UpR(k) {
    var self = $("#"+k);
    var prev = self.prev();
    self.insertBefore(prev);
}

function DownR(k) {
    var self = $("#"+k);
    var next = self.next();
    self.insertAfter(next);
}
</script>

var Kon_L=0；
函数Kon（）{
Kon_L=Kon_L+1；
var Kon_R_N=“Kon”+Kon_L；
$（“”+“Kon”+Kon_L+
“UpDIV”+
“下分区”+
“
Tekst
”+
）。附于（“.Place”）；
}
功能UpR（k）{
var self=$（“#”+k）；
var prev=self.prev（）；
self.insertBefore（prev）；
}
函数DownR（k）{
var self=$（“#”+k）；
var next=self.next（）；
self.insertAfter（下一个）；
}

同时检查您的浏览器控制台是否正常工作

不管怎样，既然你在征求意见，我建议你：

从JS代码中删除HTML。您可以使用一些jQuery选择器引用这些按钮，并将它们四处移动

如果从HTML中删除内联样式，则可以轻松地将float属性移动到button类中

将JS与HTML进一步分离，不要在HTML中使用onclick，而是使用jQuery click（）函数和选择器

---

如果您尝试这些修改，我认为您可以从Stack Overflow社区获得更多反馈。

我将提供一个简化HTML的解决方案，不在代码中放入硬编码HTML，并使用类，而不是在标记中嵌入大量代码

使用此标记开始：

<div id='Radio_N0' class='container'><span class='containerName'>Radio_N 0</span> 
    <br/>
    <button type='submit' class='button add'>Add</button>
    <button type='submit' class='button up'>Up</button>
    <button type='submit' class='button down'>Down</button>
    <br/>
    <input type='text' />
    <br />
</div>

---

查看此处的操作：

pos没有方法

.next（）

alsoI添加了

var pos=$（this.index（）；

），但它仍然不起作用。我做了类似的操作，但不幸的是它不起作用。你能帮忙吗？看看代码，我已经编辑了它，现在它起作用了，你有了codepen上的示例

<div id='Radio_N0' class='container'><span class='containerName'>Radio_N 0</span> 
    <br/>
    <button type='submit' class='button add'>Add</button>
    <button type='submit' class='button up'>Up</button>
    <button type='submit' class='button down'>Down</button>
    <br/>
    <input type='text' />
    <br />
</div>

 function AddR(k) {
     Radio_L = $('.container').length;
     var Radio_N = "Radio_N" + Radio_L;
     var newDiv = k.parents('.container').clone();
     newDiv.attr('id', Radio_N).find('.containerName').text(Radio_N);
     newDiv.insertAfter(k.parents('.container'));
 }

 function UpR(k) {
     var parent = k.parents('.container');
     var pos = parent.prev();
     parent.insertBefore(pos);
 }

 function DownR(k) {
     var parent = k.parents('.container');
     var pos = parent.next();
     parent.insertAfter(pos);
 }
 $(document).on('click', '.add', function () {
     AddR($(this));
 });
 $(document).on('click', '.up', function () {
     UpR($(this));
 });
 $(document).on('click', '.down', function () {
     DownR($(this));
 });