3

首先，圣诞快乐！

希望没有其他人在圣诞节工作，除非他们是淘汰赛专家并且真的有帮助我的冲动；-)

我正在使用出色的jQuery 列导航插件以多列方式向我的用户显示数据。它在我的静态测试中运行良好，但现在将它实施到生产代码中，我遇到了一些希望不太难解决的问题。

它需要 ul 元素内的 div 以允许在列表变大时滚动。这里的问题是我用来创建列的 foreach 将每个子元素包装在 div 中，而不是整个子集合。

例如：

我应该生成看起来像这样的 HTML

<div id="myTree">
<ul>
    <div>   <!-- required to allow scrolling within each column -->
        <li>
            <a>Homepage</a>
            <ul>
                <div>
                    <li><a>Contact</a></li>
                    <li><a>Terms &amp; Conditions</a></li>
                    <li><a>Privacy information</a></li>
                </div>
            </ul>
        </li>
        <li>
            <a>Contents</a>
            <ul>
                <div>
                    <li><a>Page 1</a></li>
                    <li>
                        <a>Page 2</a>
                        <ul>
                            <div>
                            <li><a href="./page2.1/">Page 2.1</a></li>
                            <li><a href="./page2.2/">Page 2.2</a></li>
                            </div>
                        </ul>
                    </li>
                    <li><a>Page 3</a></li>
                </div>
            </ul>
        </li>
    </div>
</ul>

但是使用这个淘汰码

<div id="whatever" style="width: 100%">
<ul data-bind="foreach: { data: Column1 }">
    <div>
        <li><a data-bind="text: Name"></a>
            <ul data-bind="foreach: { data: Column2 }">
                <div>
                    <li><a data-bind="text: Name"></a>
                        <ul data-bind="foreach: { data: Column3 }">
                            <div>
                                <li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
                            </div>
                        </ul>
                    </li>
                </div>
            </ul>
        </li>
    </div>
</ul>

我最终得到的 HTML 看起来像

<div id="myTree">
<ul>
    <div>   <!-- required to allow scrolling within each column -->
        <li>
            <a>Homepage</a>
            <ul>
                <div>
                    <li><a>Contact</a></li>
                </div>
                <div>
                    <li><a>Terms &amp; Conditions</a></li>
                </div>
                <div>
                    <li><a>Privacy information</a></li>
                </div>
            </ul>
        </li>
        <li>
            <a>Contents</a>
            <ul>
                <div>
                    <div>
                        <li><a>Page 1</a></li>
                    </div>
                    <li>
                        <a>Page 2</a>
                        <ul>
                            <div>
                                <li><a href="./page2.1/">Page 2.1</a></li>
                            </div>
                            <div>
                                <li><a href="./page2.2/">Page 2.2</a></li>
                            </div>
                        </ul>
                    </li>
                    <li><a>Page 3</a></li>
                </div>
            </ul>
        </li>
    </div>
</ul>

如何让内部 DIV 包装所有子级而不是父级内的单个子记录？

非常感谢您的帮助，并再次祝您圣诞快乐。

4

1 回答 1

9

第一条评论是正确的...您只需执行此操作即可生成所需的 HTML 输出：

 <ul>
     <div data-bind="foreach: { data: Column3 }">
         <li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
     </div>
 </ul>

虽然div直接在 aul中并不是完全有效的 HTML，但我不知道你为什么要这样做。

另一种方法是使用虚拟元素：

 <ul>
     <div>
         <!-- ko foreach: { data: Column3 } -->
             <li><a data-bind="text: Name, attr: { 'href': Url }"></a></li>
         <!-- /ko -->
     </div>
 </ul>

正如您在评论中提到的那样，如果不修改“脚本”，就没有（好的）方法可以获得所需的输出。

于 2012-12-25T07:23:35.917 回答