JQuery：附加到多個相同元素的特定實例

Question

我通過JQuery將html元素附加到我的網站，但我擔心它們的位置。我試圖做的事情可能是最簡單的一張照片解釋。

我有兩個大窗戶和兩個小窗戶。在我的表單（id爲#modelform）被提交之後，大窗口（模型）被附加到我的html的body中。在提交wald表單（帶有.wald類）後，較小的窗口（walds）將附加到我的html主體中。每個模型窗口都帶有自己的wald表單（按鈕Wald Test）。我想要的是在提交.wald表單後返回的wald窗口顯示在其關聯模型窗口的右側，而不是其下方。

而不是將wald窗口追加到html正文我想要做一些像$ wald_element.appendTo（這個wald窗體包含窗口）或者什麼？這可能嗎？

這裏是JQuery的描述這一過程：

var $counter = 0 

    //When the model form is submitted... 
    $("#modelform").submit(function() { 

     $counter++; 

     //It takes the values from the form (#mymodel) 
     //and posts the values via AJAX to '/estimate'... 
     $.post('/estimate', {name: $("#mymodel").val()}, function(data) { 

      //And the value returned from '/estimate' is appended to the html body. 
      var $model_var = data['title'] 
      var $model_element = $('<div class="window">' + $model_var + '<form class="waldform" action="#" method="post"><input type="text" id="waldnum" value="' + $counter + '" style="display:none"/><input type="submit" value="Wald Test" /></form></div><br>');  

      $('body').append($model_element) ; 

      //When a waldform is submitted... 
      $(".waldform").submit(function() { 

       //The value in the form (#waldnum), which corresponds to a specific 
       //value (model) returned from '/estimate', is posted via AJAX to '/wald' 
       $.post('/wald', {name: $(this).find('#waldnum').val()}, function(data) { 

        //And the value returned from '/wald'is appended to the html body 
        var $wald_var = data['title'] 
        var $wald_element = $('<div class="wald">' + $wald_var + '</div><br>'); 

        $("body").append($wald_element); 

           }); 

          return false ; 

          }); 

         }); 

        $(".waldform").off() ; 

       return false ; 

       }); 

Answer 1

可以發現是在submit功能使用event.target提交表單和使用功能，如.parent()遍歷DOM並找到要添加Wald元素的元素（您的案例中的窗口）。

$('form').submit(function(event) { 
    ... 
    $(event.target).parent().append($wald_element); 
    ... 
}); 

JSFiddle demo

然而，這顯示將取決於你的HTML和CSS結構的方式。您可以編輯這些項目，以便將項目追加到包含主窗口的div。或者，如果這些窗口是可移動的並且您使用絕對定位，則可以根據Model元素的offset來設置新的Wald元素的位置。

$wald_element.css({ 
     position: 'absolute', 
     top: target.offset().top, 
     left: target.offset().left + target.width() 
    }); 

JSFiddle demo

這個例子用了jQuery UI，使元素被感動，但如果你用別的東西或窗戶都沒有可移動的，它仍然應該工作。