避免使用 <span> 元素包装 Salesforce Apex 组件答案

【问题标题】：Avoid Salesforce Apex components being wrapped with <span> elements避免使用 <span> 元素包装 Salesforce Apex 组件
【发布时间】：2016-07-06 11:07:33
【问题描述】：

我是 Salesforce Apex 的新手，在一些细微差别上有点挣扎。我的问题是所有 Salesforce 组件，如 knowledge:categoryList 或 knowledge:articleList 在渲染时都被额外的 span 元素包裹，这与最初需要的相差甚远。比如：

<ul>
    <span>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </span>
</ul>

至少在语义上是错误的，但在使用像 Bootstrap 这样的库时，它们会破坏标记。有解决方案吗？或者也许我在某些时候错了？

UPD 小例子：

这...

<ul class="nav nav-tabs" role="tablist">
    <knowledge:categoryList categoryVar="category" categoryGroup="Help" rootCategory="Using_{!selectedCategory}" level="1">
        <li role="presentation">
            <a href="#{!category.name}" aria-controls="basics" role="tab" data-toggle="tab">{!category.label}</a>
        </li>
    </knowledge:categoryList>
</ul>

...呈现为...

<ul class="nav nav-tabs" role="tablist">
    <span id="j_id0:j_id1:j_id37"> // <!-- how to remove this wrapper? -->
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">One</a>
        </li>
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">Two</a>
        </li>
        <li role="presentation">
            <a href="#" aria-controls="basics" role="tab" data-toggle="tab">Three</a>
        </li>
    </span> <!-- ??? -->
</ul>

【问题讨论】：

标签： salesforce apex

【解决方案1】：

目前无法配置 Visualforce 标签在页面上的呈现方式。

如果您想在 SF 的前端拥有一个控件，您应该使用任何 JS/CSS 库/框架手动开发它，避免使用 Visualforce 标记。对于处理数据和与服务器端交互，您可以使用Visualforce Remote Objects 或JavaScript Remoting 和actionFunctions。

【讨论】：

那么，如果不使用 API，对我来说最好的选择是什么？修复 Bootstrap CSS 以尊重 APEX 插入的 span 元素？
我对 Bootstrap 不是很熟悉，我不确定它会如何影响其他东西，但是如果你不想（或不能）在没有知识的情况下重写此页面：categoryList , 这种在渲染后修改 DOM 样式的修复是唯一可能的解决方案。

【解决方案2】：

好的，我已经设法用小的 jQuery sn-p 解决了这个问题：

(function ($) { 
    $(document).ready(function () {
        var allSpansAndDivs = $('span, div');
        $.each(allSpansAndDivs, function (index, elem) {
            if ($(this).attr('id') != undefined && $(this).attr('id').indexOf('j_') > -1) {
                $(this).children().first().unwrap();
            }
        });
    });
})(jQuery);

【讨论】：