Question

我目前正在尝试调整font-size的大小以适应固定大小的div。我发现这个有趣的javascript代码很好地完成了这项工作

      $('#defect-text div').css('font-size', '1em');

            while ($('#defect-text div').height() > $('#defect-text').height()) {
                $('#defect-text div').css('font-size', (parseInt($('#defect-text div').css('font-size')) - 1) + "px");
            }

对于以下HTML代码

<div ng-repeat="defect in surface.defects" class="new-page">
           <div id="defect-text">
                                    <div>
                                        <div id="defect-title">{{ 'TYPE' | translate }}:</div>
                                        {{ defect.type }}
                                        <div id="defect-title">Emplacement du défaut:</div>
                                        {{ defect.location }}
                                        <div id="defect-title">Dimension du défaut:</div>
                                        {{ defect.dimension }}
                                        <div id="defect-title">Actions suggérées:</div>
                                        {{ defect.future_operation }}
                                        <div id="defect-title">Détail technique du défaut:</div>
                                        {{ defect.description }}</div>
                                </div></div>

但是，由于不同的div位于ng-repeat表达式中，因此我的javascript代码将调整每个容器的字体大小，使其具有所需容量的第一个容器。有没有办法改变代码来选择ng-repeat的当前元素，只改变它自己的css以适应容器？

提前致谢

Answer 1

我认为您的问题实际上是范围之一：

$('#defect-text div').css('font-size'...)

您正在选择<div>元素的所有id="defect-text"后代（无论多深）并在此时修改它们。从技术上讲，ID 必须是唯一的（如果你有多个具有相同ID的元素，行为没有明确定义），我认为你的选择器正在抓取ANY {{1}中包含的所有<div>在这个特定的循环中，1}}元素可能比你想要的要广泛得多。

我建议修改ng-repeat块并使用角色表达式语言替换ID，如

#defect-text

然后您可以使用<div id="{{ defect.id }}">获取唯一缺陷的所有$("#"+defect.id + " div")后代。

我还考虑使用子选择器<div>而不是所有后代。

在ng-repeat中自动调整字体大小

1 个答案: