JQuery создать вкладку проблемы с контентом - PullRequest
Новая
       23

JQuery создать вкладку проблемы с контентом

1 голос
/ 13 сентября 2011

Идея состоит в том, чтобы переписать оригинальный HTML (на лету) и создать вместо него контент с вкладками.Допустим, у нас есть что-то вроде: 

<div id="tabber">
<h1>Tab one</h1>
...HTML text 1...
<h1>Tab two</h1>
...HTML text 2...
<h1>Tab three</h1>
...HTML text 3...
</div>

Приведенный выше код должен иметь вид: 

<div id="tabber">
<ul>
<li class="tabbertab">Tab one</li>
<li class="tabbertab">Tab two</li>
<li class="tabbertab">Tab three</li>
</ul>
<div class="tabberdiv">...HTML text 1...</div>
<div class="tabberdiv">...HTML text 2...</div>
<div class="tabberdiv">...HTML text 3...</div>
</div>

Итак, я попытался использовать что-то вроде этого, чтобы все перевернутьот H1 до ярлыков вкладок и от следующего содержимого H1 до вкладок: 

var menu_items = [];
var all_content = jQuery( '#tabber' ).html();
jQuery( all_content )
    .filter( 'h1' )
    .each( function() {
        menu_items.push( {
            title: jQuery( this ).text(),
            contents: jQuery( this ).nextUntil( 'h1' ).map( function() {
                return jQuery( this ).html();
            } ).get()
        } );
    } );

... больше кода фактически разделит объекты, сохраненные в массиве menu_items , и создаст интерактивные вкладки, которые должнычтобы показать (скрыть) соответствующее содержимое.

Проблема заключается в том, что все "основные" теги HTML удалены из tabberdiv DIV-содержимого.Например, H2, TABLE, UL, P, DIV ... ничего из этого не существует, если используется.Тем не менее, A, LI, TR, TD все еще там.

Мне было интересно, что может быть не так с приведенным выше фрагментом кода jQuery, функция которого вызывает исчезновение элементов HTML.

Заранее спасибо!

========== Чуть позже ==========

По какой-то причине функция html () удаляет все родительские узлы,Я не эксперт по jQuery, и я думаю, для этого должна быть причина.В любом случае, простой обходной путь будет следующим: 

jQuery( all_content )
    .filter( 'h1' )
    .each( function() {
        menu_items.push( {
            title: jQuery( this ).text(),
            contents: jQuery( this ).nextUntil( 'h1' ).map( function() {
                return '<' + this.nodeName.toLowerCase() + '>' + jQuery( this ).html() + '</' + this.nodeName.toLowerCase() + '>';
            } ).get()
        } );
} );
...