Отступ здания JQuery DOM - PullRequest
Новая
       6

Отступ здания JQuery DOM

0 голосов
/ 14 ноября 2011

Это мой второй день изучения jQuery, и я до сих пор люблю его (это напоминает мне LISP), но у меня есть вопрос о способе форматирования чего-либо (или, возможно, использования функции, о которой я не знаю). У меня есть массив объектов с именем myDocuments, и в настоящее время я создаю таблицу, используя следующий код: 

jQ('<table/>').addClass('grid').attr('id', 'myDocumentTable')
    .append(jQ('<thead/>')
        .append(createHeaderRow(['Title', 'File', 'Updated By', 'Updated On'])))
    .append(jQ('<tbody/>')
        .append(jQ.map(myDocuments, function(myDocument){
            return jQ('<tr/>')
                .on({
                    mouseover: function(){jQ(this).addClass('rowHighlight');},
                    mouseout: function(){jQ(this).removeClass('rowHighlight');}
                .append(jQ('<td/>').text(myDocument.title))
                .append(jQ('<td/>')
                    .append(jQ('<a/>').addClass('file-download').attr('href', "fileOpener?id="+myDocument.fileId).text(myDocument.fileName)))
                .append(jQ('<td/>').text(myDocument.userName))
                .append(jQ('<td/>').text(myDocument.updatedOn))
                [0];
    })))

Мне действительно нравится тот факт, что если вы посмотрите на отступ, он идеально имитирует HTML, что делает его очень простым для чтения. 

<table>
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr>
            <td>
                <a />
            </td>
        </tr>
    <tbody>
</table>

Теперь допустим, что я хочу построить структуру, подобную следующей 

<div id='myDocumentDiv'
    <h3>docTitle1</h3>
    <div>docInfo1</div>
    <h3>docTitle2</h3>
    <div>docInfo2</div>
    <h3>docTitle3</h3>
    <div>docInfo3</div>
</div>

Каждый из myDocuments теперь будет создавать <h3> и <div> (вместо простого элемента <tr>). Я не могу придумать хороший способ написания кода, чтобы он соответствовал отступам HTML, не усложняя чтение JavaScript.

Изначально я столкнулся с этой проблемой, потому что хотел посмотреть, как будет выглядеть аккордеон jQuery.ui. Я понимаю, что могу обернуть <h3> и <div> во внешний <div> и использовать атрибут :header аккордеона, но мне любопытно, какие ответы люди все равно придут.

Ответы [ 2 ]

1 голос
/ 14 ноября 2011

Пример можно найти здесь .

Вы можете использовать jquery html, чтобы создать пакет html-элементов сразу.Чтобы сохранить отступ, используйте строковый оператор + для каждой строки HTML-кода. 

$('<div id="myDocumentDiv"' +
        '<h3>docTitle1</h3>' +
        '<div>docInfo1</div>' +
        '<h3>docTitle2</h3>' +
        '<div>docInfo2</div>' +
        '<h3>docTitle3</h3>' +
        '<div>docInfo3</div>' +
    '</div>')
.appendTo('#container');
0 голосов
/ 14 ноября 2011

Как насчет этого? 

var $element = $( '<div/>' );
for( var x = 0; x < 3; x++ ){

    var $header = $( '<h3/>' );
    $header.html( 'My header ' + x );

    var $body = $( '<div/>' );
    $body.html( 'My Body ' + x );

    $element.append( $header );
    $element.append( $body );

}

Я использую $ в имени переменной, чтобы указать, что это не элемент DOM, а элемент DOM, заключенный в объект запроса.

Итак, если бы я получил необработанный элемент: 

var dom_element = $element[0];

Я бы не использовал префикс $.

Надеюсь, это поможет ...

...