避免使用 <span> 元素包裹 Salesforce Apex 组件

Question

我是 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>

Answer 1

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

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

Answer 2

好的，我已经用 jQuery 小片段解决了这个问题：

(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);

避免使用 <span> 元素包裹 Salesforce Apex 组件

Avoid Salesforce Apex components being wrapped with <span> elements

salesforce

apex