开关DIV元素向上/向下与jQuery/JS

我试图移动动态表单的div元素向上或向下：开关DIV元素向上/向下与jQuery/JS

这里是我的形式：

<form name="f_form"> 
     Order name <input type="text" name="ord" id="order" /> 

     <div id="fields"> 
<div id="hid1"><a href="#" id="did1"> 
<img src="d.jpg" /></a><a href="#" id="uid1"> 
<img src="u.jpg" /></a><input type="text" name="p_name[]" id="names" /> 
<input type="text" name="quant[]" id="quant" size="3" /> 
<input type="text" name="pr[]" id="price" size="10" /> 
<input type="text" name="sum_a" id="sum" size="10" disabled="disabled"/> 
     </div> 
<input type="button" name="nauj" id="nau" value="Add item"/><br /> 
    </div> 
    </form>

当我点击“添加项目”按钮JS叫做：

$("#nau").click(function() { 
(newdiv = document.createElement('div')).id = "hid"+ (counter + 1) +""; 
newdiv.innerHTML = '<a href="#" id="did'+ (counter + 1) +'"><img src="d.jpg" /></a><a href="#" id="uid'+ (counter + 1) +'"><img src="u.jpg" /></a><input type="text" name="p_name[]" id="names" /> 
<input type="text" name="quant[]" id="quant" size="3" /> 
<input type="text" name="pr[]" id="price" size="10" /> 
<input type="text" name="sum_a" id="sum" size="10" disabled="disabled"/><a href="#" id="delete'+ (counter + 1) +'">X</a>'; 
      document.getElementById('fields').appendChild(newdiv); 
      counter++; 
});

每个表单字段行具有两个箭头（上下）图像：<a href="#" id="did'+ (counter + 1) +'"><img src="d.jpg" /></a><a href="#" id="uid'+ (counter + 1) +'"><img src="u.jpg" /></a>

当我点击箭头我需要移动表单域的所有的行向上或向下（移动<DIV id=hid..>）试过这样，但它didint工作。（上移功能）

$("a[id^='uid']").on('click', function() { 
      var numrow = $(this).attr("id"); 
      numrow = numrow.substr(3); 
      var nr = 1; 

      sumrow = numrow - nr; 
      var eil = 'id=' + numrow; 
      numrowas = "#hid"+numrow; 
      srowas = "#hid"+sumrow; 
        $(numrowas).before($(srowas)); 
     });

感谢意见。

来源

2012-07-11 Osvalda Kazlaučiūnaitė

与@WTK相同的解决方案，使用.prev()，但方法不同。哦，我无法抗拒，并做了一些清理;）

请参阅http://jsfiddle.net/WmbmF/4/

来源

2012-07-11 08:53:33

首先，您没有正确使用on() - 事件处理程序没有像您期望的那样绑定。正确的语法是：

// "watch for" elements matching selector "a[id^='did']" created inside #fields 
$("#fields").on('click', "a[id^='did']", function(e) {...})

所有的二，你想在ID操作属性deremine什么div来追加当前的元素后，前/。这很麻烦，一个更清洁的方法是使用.next()和.prev()来确定与点击的节点相关的下一个或前一个节点。

我创建了一个小提琴为例：http://jsfiddle.net/SPgax/22/

正如一个侧面说明：你的代码是凌乱的，我并没有就此采取行动，因为它超出了你的问题的范围。没有冒犯:)

来源

2012-07-11 08:39:34 WTK

开关DIV元素向上/向下与jQuery/JS

回答

相关问题