Question

我通过JQuery将html元素附加到我的网站，但我担心他们的位置。我想要做的事情可能最容易用图片解释。

我有两个大窗户和两个小窗户。在我的表单（带有id #modelform）被提交之后，大窗口（模型）是使用JQuery附加到我的html主体的内容。较小的窗口（walds）是在提交wald表单（带有类.wald）之后附加到我的html主体的内容。每个模型窗口都有自己的wald形式（按钮Wald Test）。我想要的是在提交.wald表单后返回的wald窗口显示在其相关模型窗口的右侧，而不是在它下面。

不是将wald窗口附加到html主体，而是想做一些像$ wald_element.appendTo（这个包含窗口的wald形式）的东西？这可能吗？

enter image description here

以下是描述该过程的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

您可以在event.target函数中找到使用submit提交的表单，并使用.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来移动元素，但如果您正在使用其他内容或者窗口不可移动，那么它仍然可以工作。

JQuery：追加到多个相同元素的特定实例

1 个答案: