将 jquery html 构造函数添加到另一个

Question

我正在尝试根据 ajax(JSON) 数据动态构建手风琴。我需要生成以下 html 标签，但我找不到方便的方法。

<h3></h3>
<div>
       <p> </p>
</div>

手风琴与我过去附加的 < li > 标签一起工作，但它是肮脏的解决方案，我不喜欢它。应该有办法做得更漂亮。

请各位小白帮忙，谢谢！

$.ajax({
    url: '/getCar',
    type: 'GET',
    success: function(res) {
        var delCarPost = $('<form>').attr('method', 'post').append($('<input>').attr({
                        type: "hidden",
                        name: "carid", 
                        id: "carid"
                    }),
                    $('<input>').attr({
                    type: "submit",
                    value: "delete"})
                    );
        // var div = $('<h4>').before($('<div>').append($('<p>')));

            var div = $('<div>').append($('<p>'))
            div = $("<li>").append($('<h4>'),$(div))
        // var div = $("<li>").append($('<h4>'),$('<div>').append($('<p>')));

            var carObj = JSON.parse(res);
            var car = '';
            $.each(carObj,function(index, value){

                car = $(div).clone();
                $(car).find('h4').text(value.make + " from " + value.year + " at price " + value.price);
                $(car).find('p').text(value.info);
                $('#accordion').append(car);
                $("#accordion").accordion("refresh");
                console.log(div);
            });
                $('#accordion').on( 'click', 'button', function () {
                    post('/delCar', {postMake: value.make}, "post");
                });

    },
    error: function(error) {
        console.log(error);
    }
});

Answer 1

这是一个可能对您有所帮助的答案。我在里面留下了一些评论：

$.ajax({
    url: '/getCar',
    type: 'GET',
    "dataType": "json", //no need to JSON.parse
    success: function(cars) {
        //you should specify where you append those nodes ...
        var delCarPost = $('<form>').attr('method', 'post').append(
            $('<input>').attr({
                type: "hidden",
                name: "carid", 
                id: "carid"
            }),
            $('<input>').attr({
                type: "submit",
                value: "delete"
            })
        );

        //bellow a simplified version
        var html = '';
        $.each(cars,function(index, car){
            html += [
                '<li>',
                    '<h3>' + car.make + ' from ' + car.year + ' at price ' + car.price + '</h3>',
                    '<div>',
                         '<p>' + car.info + '</p>',
                    '</div>',
                '<li>'
            ].join('');
        });

        //cache your access to jQuery
        var accordion = $('#accordion');
        accordion.html(html);//innerHTML everything above in one time (only one DOM access)
        accordion.accordion("refresh");

        accordion.on( 'click', 'button', function () {
            post('/delCar', {postMake: value.make}, "post");
        });

    },
    error: function(error) {
        console.log(error);
    }
});

Answer 2

我使用 Mustache.js 模板找到了更好的解决方案。

由于我使用 Jinja 模板 + Mustache，因此模板如下所示：

{% raw %}
<script id="CarAccTemplate" type="x-tmpl-mustache">
    <h3 id='{{ id }}'> {{ make }} from {{ year }} at price {{ price }}
        <div class="pull-right action-buttons">
            <a id='delcar-{{ id }}' onclick="ConfirmDelete(this)">
                <span class="glyphicon glyphicon-trash"></span>
            </a>
        </div>
    </h3>
    <div>
         <p>{{info}}</p>
    </div>
</script>
{% endraw %}

在 js 中

$.ajax({
    url: '/getCar',
    type: 'GET',
    "dataType": "json", //no need to JSON.parse
    success: function(cars) {

        //bellow a simplified version
        var html = '';
        $.each(cars,function(index, car){
            var template = $('#CarAccTemplate').html();
            Mustache.parse(template)
            var rendered = Mustache.render(template, car);
            html += rendered;
        });

        //cache your access to jQuery
        var accordion = $('#accordion');
        accordion.html(html);//innerHTML everything above in one time (only one DOM access)
        $( "#accordion" ).accordion({heightStyle: "content"});
        accordion.accordion("refresh");
        //feed the form on click event
        $('#accordion h3').on("click select focus", function(e){
            //parse the text
            carid = $(this).attr('id');
            text = $(this).text();
            make = text.split("from",1)[0].trim();
            year = text.match(/from (.*)/)[1].match(/^\d+/)[0].trim();
            price = text.match(/price (.*)/)[1].trim();
            info = $('div[aria-labelledby=' + carid + "]").children('p').text();

//          console.log($('form[id="addCar"]  fieldset  div'));

            // feed form with values from accordion
            $('.form-group #inputYear:text').val(year);
            $('.form-group #inputMake:text').val(make);
            $('.form-group #inputPrice:text').val(price);
            $('.form-group #inputInfo').val(info);
            $('.form-group #carId').val(carid);
        });

//        accordion.on( 'click', 'button', function () {
//            post('/delCar', {postMake: value.make}, "post");
//        });

    },
    error: function(error) {
        console.log(error);
    }
});

将 jquery html 构造函数添加到另一个

adding jquery html constructor to another

html

javascript

tags

jquery

jquery-ui-accordion