1

这个想法是重写原始 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()
        } );
} );
4

0 回答 0