Question

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

jQuery创建选项卡式内容问题

0 个答案: