開關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

回答

相關問題