Блог

Главная - Вопросы по программированию - Как расширить jquery с помощью метода, который задает целевой html?

Как расширить jquery с помощью метода, который задает целевой html?

#jquery

#jquery

Вопрос:

Я пытаюсь расширить jquery с помощью простой функции, которая создает таблицу и добавляет к ней заголовки. Итак, идея проста: вы выбираете div, создаете _table с помощью метода .table(headers) и устанавливаете HTML-код div в качестве _table внутри функции. Я предположил, что $(this).append(_table); будет выполнять настройку HTML-кода div, но это не так. Как это сделать правильно?

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $.fn.extend({
                table: function (headers) {
                    var _table = $('<table></table>');
                    console.log(_table.html());

                    if (headers.length > 0) {
                        var gridContent = '<thead><tr>';

                        $.each(headers, function (index, element) {
                            gridContent  = ('<th>'   element   '</th>');
                        });

                        gridContent  = ('</tr></thead>');
                        console.log(gridContent);
                        _table.append(gridContent);
                    }
                }
            });

            $('#container').table(['id', 'name', 'city']);
        </script>
        <title></title>
    </head>
    <body>
        <div id="grid-container"></div>
    </body>
    </html>

Ответ №1:

Внутри вашего расширения он содержит элемент, в который вы пытаетесь поместить таблицу. Таким образом, код может быть таким:

 $.fn.extend({
    table: function(headers) {
        var table = $('<table></table>');
        if(headers.length > 0){
            var gridContent = '<thead><tr>';
            $.each(headers, function (index, element) {
                gridContent  = ('<th>'   element   '</th>');
            });
            gridContent  = ('</tr></thead>');
            table.append(gridContent);
            $(this).append(table);
        }
    }
});

http://jsfiddle.net/wY8L2/

Итак, почему это не сработало с вами? Потому что вы вызываете функцию для создания таблицы перед <div> загрузкой. ваш скрипт с кодом :

 $('#container').table(['id', 'name', 'city']);

Должно выполняться после <div></div>
или после события onload (например, так):

 $(function(){
    $('#container').table(['id', 'name', 'city']);
})

Ответ №2:

Попробуйте установить ваш HTML this вместо $(this) этого:

 this.append(_table);

// or better (because your selector can select possibly more than one DOM element)

this.each(function() {
    jQuery(this).append(_table);
    return false; // break the loop after first element to only append to first element, and overall only once.
});

Вы можете найти пример здесь: http://api.jquery.com/jquery.fn.extend /

Ах, Джо, и это то, что @Thanasis Grammatopoulos сказал в конце своего решения.

Вы можете разместить свою функцию расширения где угодно. Но вызовите его после того, как DOM будет готов.

 // wait for DOM to be ready...
jQuery(document).ready(function() {
    jQuery('#container').table(['id', 'name', 'city']);
});